Skip to content

feat: navbar style management update, navbar nav design update #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SolitudeRA merged 1 commit into from
Jan 13, 2026
Merged

feat: navbar style management update, navbar nav design update #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/layout/dock/DockNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ const privacyLink = buildLocalePath(lang, 'privacy-policy');
<div class="hidden md:grid md:justify-items-center">
<div
class:list={[
'text-color-ui flex items-center justify-center rounded-[2em]',
'bg-gray-100 opacity-[0.85] shadow-xl dark:bg-zinc-800',
'dock-nav',
'text-color-ui flex items-center justify-center',
'h-10 md:h-11 lg:h-12 xl:h-14',
'min-h-[2.5rem] md:min-h-[2.75rem] lg:min-h-[3rem]',
'w-auto max-w-full',
Expand Down
40 changes: 21 additions & 19 deletions src/components/layout/dock/DockNavMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,11 +188,9 @@ export default function DockNavMobile() {
<button
onClick={toggleMenu}
className={cn(
'text-color-ui flex h-12 w-12 items-center justify-center rounded-full',
'bg-gray-100 opacity-85 shadow-lg transition-all duration-300',
'dark:bg-zinc-800',
'hover:opacity-100 active:scale-95',
'focus-visible:ring-foreground/50 focus:outline-none focus-visible:ring-2',
'dock-button',
'text-color-ui flex h-12 w-12 items-center justify-center',
isOpen && 'dock-button--active',
)}
aria-label={isOpen ? '关闭菜单' : '打开菜单'}
aria-expanded={isOpen}
Expand All @@ -207,7 +205,7 @@ export default function DockNavMobile() {
{/* 遮罩层 */}
<div
className={cn(
'fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300',
'dock-overlay fixed inset-0 z-40 transition-opacity duration-300',
isOpen
? 'pointer-events-auto opacity-100'
: 'pointer-events-none opacity-0',
Expand All @@ -219,8 +217,8 @@ export default function DockNavMobile() {
{/* 菜单面板 */}
<div
className={cn(
'fixed right-4 bottom-20 left-4 z-50',
'rounded-2xl bg-gray-100 p-4 shadow-2xl dark:bg-zinc-800',
'dock-menu',
'fixed right-4 bottom-20 left-4 z-50 p-4',
'transform transition-all duration-300 ease-out',
'max-h-[70vh] overflow-y-auto',
isOpen
Expand All @@ -238,13 +236,20 @@ export default function DockNavMobile() {
<button
onClick={toggleRssMenu}
className={cn(
'text-color-ui flex w-full items-center justify-between rounded-xl px-4 py-3 font-medium',
'transition-colors duration-200',
'hover:bg-gray-200 dark:hover:bg-zinc-700',
'dock-menu-item',
'text-color-ui flex w-full items-center justify-between',
isRssExpanded &&
'bg-gray-200 dark:bg-zinc-700',
'dock-menu-item--active',
)}
aria-expanded={isRssExpanded}
style={
isRssExpanded
? {
background:
'var(--dock-menu-item-hover-bg)',
}
: undefined
}
>
<span>{item.label}</span>
<ChevronDown
Expand Down Expand Up @@ -274,9 +279,8 @@ export default function DockNavMobile() {
)
}
className={cn(
'text-color-ui flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium',
'transition-colors duration-200',
'hover:bg-gray-200 dark:hover:bg-zinc-700',
'dock-menu-subitem',
'text-color-ui flex items-center gap-2',
option.id === currentLocale
? 'bg-primary/10 text-primary'
: '',
Expand All @@ -303,10 +307,8 @@ export default function DockNavMobile() {
href={item.href}
onClick={closeMenu}
className={cn(
'text-color-ui block rounded-xl px-4 py-3 font-medium',
'transition-colors duration-200',
'hover:bg-gray-200 dark:hover:bg-zinc-700',
'active:bg-gray-300 dark:active:bg-zinc-600',
'dock-menu-item',
'text-color-ui block',
)}
>
{item.label}
Expand Down
10 changes: 4 additions & 6 deletions src/components/layout/dock/DockSocialMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function DockSocialMobile() {
{/* 汉堡按钮 */}
<button
onClick={() => setIsOpen(!isOpen)}
className={`flex h-10 w-10 items-center justify-center rounded-full bg-gray-100/85 shadow-lg backdrop-blur-sm transition-all duration-200 hover:scale-105 sm:h-11 sm:w-11 dark:bg-zinc-800/85 ${isOpen ? 'ring-2 ring-blue-400' : ''} `}
className={`dock-button flex h-10 w-10 items-center justify-center sm:h-11 sm:w-11 ${isOpen ? 'dock-button--active' : ''}`}
aria-label="Social links menu"
aria-expanded={isOpen}
>
Expand All @@ -66,24 +66,22 @@ export default function DockSocialMobile() {
{/* 遮罩层 */}
{isOpen && (
<div
className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
className="dock-overlay fixed inset-0 z-40"
onClick={() => setIsOpen(false)}
/>
)}

{/* 弹出菜单 */}
{isOpen && (
<div
className={`animate-in slide-in-from-bottom-4 fade-in fixed right-4 bottom-24 z-50 min-w-[200px] rounded-2xl bg-gray-100/95 p-4 shadow-2xl backdrop-blur-md duration-200 sm:right-6 dark:bg-zinc-800/95`}
>
<div className="dock-menu animate-in slide-in-from-bottom-4 fade-in fixed right-4 bottom-24 z-50 min-w-[200px] p-4 duration-200 sm:right-6">
<div className="flex flex-col gap-3">
{socialLinks.map((link) => (
<a
key={link.name}
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-gray-200/80 dark:hover:bg-zinc-700/80"
className="dock-social-item flex items-center gap-3"
onClick={() => setIsOpen(false)}
>
<link.icon className="h-5 w-5" />
Expand Down
122 changes: 122 additions & 0 deletions src/styles/components/dock.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/**
* Dock 组件样式
* 底部导航栏及移动端菜单的主题化样式
*/

@layer components {
/* ===== 桌面端导航栏 ===== */
.dock-nav {
position: relative;
background: var(--dock-nav-bg);
opacity: var(--dock-nav-opacity);
box-shadow: 0 10px 40px var(--dock-nav-shadow);
border-radius: var(--dock-nav-radius);
}

/* 彩虹色边框 - 与 PostView 卡片一致 */
.dock-nav::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from 0deg,
#ff6b6b,
#feca57,
#48dbfb,
#ff9ff3,
#54a0ff,
#5f27cd,
#ff6b6b
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.5;
transition: opacity 0.3s ease;
z-index: 0;
}

.dock-nav:hover::after {
opacity: 0.8;
}

/* 确保导航栏内容在彩虹边框之上 */
.dock-nav > * {
position: relative;
z-index: 1;
}

/* ===== 汉堡按钮（移动端菜单触发器） ===== */
.dock-button {
background: var(--dock-button-bg);
box-shadow: 0 4px 20px var(--dock-button-shadow);
@apply rounded-full transition-all duration-300;
}

.dock-button:hover {
@apply opacity-100;
}

.dock-button:active {
@apply scale-95;
}

.dock-button:focus-visible {
@apply ring-2 outline-none;
--tw-ring-color: var(--dock-button-ring);
}

.dock-button--active {
@apply ring-2;
--tw-ring-color: var(--dock-button-ring);
}

/* ===== 遮罩层 ===== */
.dock-overlay {
background: var(--dock-overlay-bg);
@apply backdrop-blur-sm;
}

/* ===== 菜单面板 ===== */
.dock-menu {
background: var(--dock-menu-bg);
box-shadow: 0 25px 50px -12px var(--dock-menu-shadow);
@apply rounded-2xl backdrop-blur-md;
}

/* ===== 菜单项 ===== */
.dock-menu-item {
@apply rounded-xl px-4 py-3 font-medium transition-colors duration-200;
}

.dock-menu-item:hover {
background: var(--dock-menu-item-hover-bg);
}

.dock-menu-item:active {
background: var(--dock-menu-item-active-bg);
}

/* 子菜单项（RSS 选项等） */
.dock-menu-subitem {
@apply rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200;
}

.dock-menu-subitem:hover {
background: var(--dock-menu-item-hover-bg);
}

/* ===== 社交链接菜单项 ===== */
.dock-social-item {
@apply rounded-lg px-3 py-2 transition-colors duration-200;
}

.dock-social-item:hover {
background: var(--dock-menu-item-hover-bg);
}
}
1 change: 1 addition & 0 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
@import './tailwind-settings.css';
@import './components/article/index.css';
@import './components/navbar.css';
@import './components/dock.css';
@import './utilities/text-utilities.css';
32 changes: 32 additions & 0 deletions src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,24 @@ html[lang='en-GB'] {
--navbar-scrolled-border: oklch(0.5 0.01 264.665 / 0.1);
--navbar-scrolled-shadow: oklch(0.3 0.02 264.665 / 0.15);

/* ===== Dock 配色 ===== */
/* 导航栏 */
--dock-nav-bg: oklch(0.96 0.005 264.665);
--dock-nav-opacity: 0.85;
--dock-nav-shadow: oklch(0.3 0.02 264.665 / 0.25);
--dock-nav-radius: 2em;
/* 按钮 */
--dock-button-bg: oklch(0.96 0.005 264.665 / 0.85);
--dock-button-shadow: oklch(0.3 0.02 264.665 / 0.2);
--dock-button-ring: oklch(0.6 0.18 260);
/* 菜单面板 */
--dock-menu-bg: oklch(0.96 0.005 264.665 / 0.95);
--dock-menu-shadow: oklch(0.2 0.02 264.665 / 0.3);
--dock-menu-item-hover-bg: oklch(0.92 0.005 264.665);
--dock-menu-item-active-bg: oklch(0.88 0.008 264.665);
/* 遮罩层 */
--dock-overlay-bg: oklch(0 0 0 / 0.5);

/* ===== Post View 页面配色 ===== */
/* 卡片覆盖层渐变 - 更亮的白色调 */
--post-view-card-overlay-start: oklch(0.98 0 0 / 0.78);
Expand Down Expand Up @@ -300,6 +318,20 @@ html[lang='en-GB'] {
--navbar-scrolled-border: oklch(0.98 0.005 264.665 / 0.05);
--navbar-scrolled-shadow: oklch(0 0 0 / 0.2);

/* ===== Dock 配色 ===== */
/* 导航栏 */
--dock-nav-bg: oklch(0.24 0.02 264.665);
--dock-nav-shadow: oklch(0 0 0 / 0.35);
/* 按钮 */
--dock-button-bg: oklch(0.24 0.02 264.665 / 0.85);
--dock-button-shadow: oklch(0 0 0 / 0.3);
--dock-button-ring: oklch(0.6 0.18 260);
/* 菜单面板 */
--dock-menu-bg: oklch(0.24 0.02 264.665 / 0.95);
--dock-menu-shadow: oklch(0 0 0 / 0.4);
--dock-menu-item-hover-bg: oklch(0.3 0.02 264.665);
--dock-menu-item-active-bg: oklch(0.35 0.02 264.665);

/* ===== Post View 页面配色 ===== */
/* 卡片覆盖层渐变 */
--post-view-card-overlay-start: oklch(0.12 0.025 264.665 / 0.65);
Expand Down