Skip to content

fix(MainHeader): button bottom border flicker #1193

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

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

fix(MainHeader): button bottom border flicker #1193

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
09d390d
fix(MainHeader): button bottom border flicker
marvin-j97 Jun 3, 2025
f6a69a2
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 3, 2025
d0c8b27
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 3, 2025
64a72a6
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 7, 2025
2629e6c
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 11, 2025
b0a1913
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 11, 2025
bbe8108
Merge branch 'main' into fix/topbar-btn-flicker
marvin-j97 Jun 11, 2025
2daaf33
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 14, 2025
016d7a4
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 14, 2025
e19f0fb
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 14, 2025
6798d25
Merge branch 'main' into fix/topbar-btn-flicker
kodiakhq[bot] Jun 18, 2025
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
21 changes: 13 additions & 8 deletions src/ui/layout/main-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,11 @@ export function MainHeader(props: NavProps) {
<li>
<A
href="/"
class="text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2"
class="border-b-2 text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2"
activeClass="border-b-blue-500 dark:bottom-b-blue-500"
inactiveClass="border-transparent"
classList={{
"border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250":
"transition-all duration-250":
project() === "solid" && !translatedLocale(),
}}
addLocale
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the last commit, the "core" link is always active.

You can't rely solely on inactiveClass and activeClass for this specific link. You should use classList to apply the relevant border classes, like the original code.

Expand All @@ -108,8 +110,9 @@ export function MainHeader(props: NavProps) {
<li>
<A
href="/solid-router"
class="text-slate-900 dark:text-slate-200 px-2"
activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
class="border-b-2 text-slate-900 dark:text-slate-200 px-2"
activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
inactiveClass="border-transparent"
addLocale
>
Router
Expand All @@ -118,8 +121,9 @@ export function MainHeader(props: NavProps) {
<li>
<A
href="/solid-start"
class="text-slate-900 dark:text-slate-200 px-2"
activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
class="border-b-2 text-slate-900 dark:text-slate-200 px-2"
activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
inactiveClass="border-transparent"
addLocale
>
SolidStart
Expand All @@ -128,8 +132,9 @@ export function MainHeader(props: NavProps) {
<li>
<A
href="/solid-meta"
class="text-slate-900 dark:text-slate-200 px-2"
activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
class="border-b-2 text-slate-900 dark:text-slate-200 px-2"
activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
inactiveClass="border-transparent"
addLocale
>
Meta
Expand Down