Skip to content

fix: navbar nav animation issue #31

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 14, 2026
Merged

fix: navbar nav animation issue #31

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
9 changes: 5 additions & 4 deletions src/components/layout/dock/DockNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,19 @@ const privacyLink = buildLocalePath(lang, 'privacy-policy');
>About</a
>
</div>
<div class="dock-nav-item">
<!-- Contact - md 时为右侧，lg+ 时为普通 -->
<div class="dock-nav-item dock-nav-item-right-md">
<a
href={contactLink}
class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
>Contact</a
>
</div>
<!-- RSS 选择器 - 在平板竖屏隐藏，横屏及以上显示 -->
<div class="dock-nav-item hidden lg:flex">
<!-- RSS 选择器 - lg 时为右侧，xl 时为普通 -->
<div class="dock-nav-item dock-nav-item-right-lg hidden lg:flex">
<RssSelector client:load showLabel={true} />
</div>
<!-- Privacy Policy 仅在大屏显示 -->
<!-- Privacy Policy 仅在大屏显示，xl+ 为右侧 -->
<div class="dock-nav-item-right hidden xl:flex">
<a
href={privacyLink}
Expand Down
129 changes: 125 additions & 4 deletions src/styles/modules/dock.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,104 @@
content: none;
}

/* ===== 响应式右侧边框 - Contact (md 断点) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
.dock-nav-item.dock-nav-item-right-md {
border-radius: 0 var(--dock-nav-radius) var(--dock-nav-radius) 0;
overflow: hidden;
}

.dock-nav-item.dock-nav-item-right-md::before {
content: '';
position: absolute;
inset: 0;
left: -2px;
top: 0;
right: 0;
bottom: 0;
height: auto;
padding: 2px;
background: linear-gradient(
45deg,
#ff6b6b,
#feca57,
#48dbfb,
#54a0ff
);
border-radius: 0 var(--dock-nav-radius) var(--dock-nav-radius) 0;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 5;
pointer-events: none;
}

.dock-nav-item.dock-nav-item-right-md:hover::before {
opacity: 1;
}

.dock-nav-item.dock-nav-item-right-md::after {
content: none;
}

.dock-nav-item.dock-nav-item-right-md .dock-nav-link {
padding-right: 1.5rem;
}
}

/* ===== 响应式右侧边框 - RSS (lg 断点) ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
.dock-nav-item.dock-nav-item-right-lg {
border-radius: 0 var(--dock-nav-radius) var(--dock-nav-radius) 0;
overflow: hidden;
}

.dock-nav-item.dock-nav-item-right-lg::before {
content: '';
position: absolute;
inset: 0;
left: -2px;
top: 0;
right: 0;
bottom: 0;
height: auto;
padding: 2px;
background: linear-gradient(
45deg,
#ff6b6b,
#feca57,
#48dbfb,
#54a0ff
);
border-radius: 0 var(--dock-nav-radius) var(--dock-nav-radius) 0;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 5;
pointer-events: none;
}

.dock-nav-item.dock-nav-item-right-lg:hover::before {
opacity: 1;
}

.dock-nav-item.dock-nav-item-right-lg::after {
content: none;
}

.dock-nav-item.dock-nav-item-right-lg .dock-nav-link {
padding-right: 2rem;
}
}

/* 导航项下边框 */
.dock-nav-item::after {
content: '';
Expand All @@ -197,12 +295,31 @@
z-index: 10;
}

/* hover 触发上下边框渐显 */
.dock-nav-item:hover::before,
.dock-nav-item:hover::after {
/* hover 触发上下边框渐显 - 排除响应式右侧元素 */
.dock-nav-item:not(.dock-nav-item-right-md):not(
.dock-nav-item-right-lg
):hover::before,
.dock-nav-item:not(.dock-nav-item-right-md):not(
.dock-nav-item-right-lg
):hover::after {
opacity: 1;
}

/* 响应式右侧元素在对应断点外使用默认样式 */
@media (min-width: 1024px) {
.dock-nav-item.dock-nav-item-right-md:hover::before,
.dock-nav-item.dock-nav-item-right-md:hover::after {
opacity: 1;
}
}

@media (min-width: 1280px) {
.dock-nav-item.dock-nav-item-right-lg:hover::before,
.dock-nav-item.dock-nav-item-right-lg:hover::after {
opacity: 1;
}
}

@media (min-width: 1024px) {
.dock-nav-item {
min-width: 5.28rem;
Expand Down Expand Up @@ -232,7 +349,9 @@
/* 玻璃质感高光 hover 效果 */
.dock-nav-item:hover,
.dock-nav-item-left:hover,
.dock-nav-item-right:hover {
.dock-nav-item-right:hover,
.dock-nav-item-right-md:hover,
.dock-nav-item-right-lg:hover {
background: oklch(1 0 0 / 0.1);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.2),
Expand Down Expand Up @@ -302,6 +421,8 @@
.dock-nav-item:hover .dock-nav-link,
.dock-nav-item-left:hover .dock-nav-link,
.dock-nav-item-right:hover .dock-nav-link,
.dock-nav-item-right-md:hover .dock-nav-link,
.dock-nav-item-right-lg:hover .dock-nav-link,
.dock-nav-link:hover {
color: oklch(0.85 0.1 280);
}
Expand Down