Skip to content

Feat/design-update #29

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 2 commits into from
Jan 14, 2026
Merged

Feat/design-update #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c59f3e7
feat/update navbar nav defign
SolitudeRA Jan 14, 2026
35eb3e0
feat: navbar nav design update
SolitudeRA Jan 14, 2026
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
5 changes: 4 additions & 1 deletion src/components/common/RssSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,10 @@ export default function RssSelector({
<button
onClick={() => setIsOpen(!isOpen)}
onKeyDown={handleKeyDown}
className="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
className={cn(
'text-xs font-medium whitespace-nowrap md:text-sm lg:text-base',
'dock-nav-link',
)}
aria-label="订阅 RSS"
aria-expanded={isOpen}
aria-haspopup="listbox"
Expand Down
50 changes: 39 additions & 11 deletions src/components/layout/dock/DockNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,45 +35,73 @@ const privacyLink = buildLocalePath(lang, 'privacy-policy');
'3xl:space-x-12 space-x-2 md:space-x-3 lg:space-x-5 xl:space-x-8 2xl:space-x-10',
]}
>
<div>
<div class="dock-nav-item">
<a
href={homeLink}
class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
>Home</a
>
</div>
<div>
<div class="dock-nav-item">
<a
href={postsLink}
class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
>Posts</a
>
</div>
<div>
<div class="dock-nav-item">
<a
href={aboutLink}
class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
>About</a
>
</div>
<div>
<div class="dock-nav-item">
<a
href={contactLink}
class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
>Contact</a
>
</div>
<!-- RSS 选择器 - 在平板竖屏隐藏，横屏及以上显示 -->
<div class="hidden lg:flex lg:items-center">
<div class="dock-nav-item hidden lg:flex">
<RssSelector client:load showLabel={true} />
</div>
<!-- Privacy Policy 仅在大屏显示 -->
<div class="hidden xl:block">
<div class="dock-nav-item hidden xl:flex">
<a
href={privacyLink}
class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
>Privacy</a
>
</div>
</div>
</div>

<script>
// 方向感知下划线效果
function initDirectionalUnderline() {
const items = document.querySelectorAll('.dock-nav-item');

items.forEach((item) => {
const link = item.querySelector('.dock-nav-link');
if (!link) return;

item.addEventListener('mouseenter', (e) => {
const rect = item.getBoundingClientRect();
const mouseX = (e as MouseEvent).clientX;
const centerX = rect.left + rect.width / 2;

// 根据鼠标进入位置判断方向
const direction = mouseX < centerX ? 'left' : 'right';
link.setAttribute('data-direction', direction);
});
});
}

// 页面加载时初始化
initDirectionalUnderline();

// 支持 Astro 视图过渡
document.addEventListener('astro:after-swap', initDirectionalUnderline);
</script>
106 changes: 101 additions & 5 deletions src/styles/modules/dock.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,31 @@
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);
/* 玻璃质感效果 */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 10px 40px var(--dock-nav-shadow),
inset 0 1px 1px oklch(1 0 0 / 0.1),
inset 0 -1px 1px oklch(0 0 0 / 0.05);
}

/* 顶部光泽渐变 - 玻璃高光效果 + 彩虹光晕 */
.dock-nav::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
180deg,
oklch(1 0 0 / 0.12) 0%,
oklch(1 0 0 / 0.04) 30%,
transparent 60%
);
box-shadow: 0 0 30px oklch(0.7 0.15 280 / 0.15);
pointer-events: none;
z-index: 1;
}

/* 彩虹色边框 - 与 PostView 卡片一致 */
Expand All @@ -20,7 +43,7 @@
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
padding: 2px;
background: conic-gradient(
from 0deg,
#ff6b6b,
Expand All @@ -37,13 +60,17 @@
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.5;
transition: opacity 0.3s ease;
opacity: 0.4;
filter: blur(1px);
transition:
opacity 0.3s ease,
filter 0.3s ease;
z-index: 0;
}

.dock-nav:hover::after {
opacity: 0.8;
opacity: 0.9;
filter: blur(2px);
}

/* 确保导航栏内容在彩虹边框之上 */
Expand All @@ -52,6 +79,75 @@
z-index: 1;
}

/* ===== 导航项容器 - 扩展触发区域 ===== */
.dock-nav-item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 0.5rem;
cursor: pointer;
border-radius: 8px;
transition:
background 0.3s ease,
box-shadow 0.3s ease;
}

/* 玻璃质感高光 hover 效果 */
.dock-nav-item:hover {
background: oklch(1 0 0 / 0.1);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.2),
inset 0 -1px 0 oklch(0 0 0 / 0.05);
}

/* ===== 导航链接 hover 效果 - 方向感知下划线 ===== */
.dock-nav-link {
position: relative;
display: inline-block;
transition: color 0.3s ease;
}

.dock-nav-link::after {
content: '';
position: absolute;
bottom: -2px;
height: 2px;
background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #54a0ff);
border-radius: 1px;
transition:
left 0.3s ease,
right 0.3s ease,
width 0.3s ease;
width: 0;
left: 0;
right: auto;
}

/* 父容器 hover 或链接自身 hover 都触发效果 */
.dock-nav-item:hover .dock-nav-link::after,
.dock-nav-link:hover::after {
width: 100%;
}

/* 从右到左进入 */
.dock-nav-link[data-direction='right']::after {
left: auto;
right: 0;
}

/* 从左到右进入 */
.dock-nav-link[data-direction='left']::after {
left: 0;
right: auto;
}

/* 父容器 hover 或链接自身 hover 都改变颜色 */
.dock-nav-item:hover .dock-nav-link,
.dock-nav-link:hover {
color: oklch(0.85 0.1 280);
}

/* ===== 汉堡按钮（移动端菜单触发器） ===== */
.dock-button {
background: var(--dock-button-bg);
Expand Down
4 changes: 2 additions & 2 deletions src/styles/theme/dark/dock.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@

.dark {
/* 桌面端导航栏 */
--dock-nav-bg: oklch(0.18 0.025 264.665 / 0.9);
--dock-nav-bg: oklch(0.13 0.028 261.692 / 0.85);
--dock-nav-opacity: 1;
--dock-nav-shadow: oklch(0 0 0 / 0.3);
--dock-nav-radius: 1rem;
--dock-nav-radius: 1.2rem;

/* 汉堡按钮（移动端菜单触发器） */
--dock-button-bg: oklch(0.2 0.03 264.665 / 0.95);
Expand Down