Skip to content

Improve main header button design #1194

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

Closed
wants to merge 7 commits into from
Closed

Improve main header button design #1194

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
09d390d
fix(MainHeader): button bottom border flicker
marvin-j97 Jun 3, 2025
7f453fb
style(MainHeader): better button design
marvin-j97 Jun 3, 2025
297ebe4
main header button light design
marvin-j97 Jun 3, 2025
f270b63
change main header button light hover bg color
marvin-j97 Jun 3, 2025
8874f22
Merge branch 'main' into style/topbar-btn
kodiakhq[bot] Jun 3, 2025
fb324b1
Merge branch 'main' into style/topbar-btn
kodiakhq[bot] Jun 3, 2025
b8bc98a
Merge branch 'main' into style/topbar-btn
kodiakhq[bot] Jun 7, 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
18 changes: 9 additions & 9 deletions src/ui/layout/main-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,13 @@ export function MainHeader(props: NavProps) {
</A>
</div>

<ul class="order-2 col-span-2 lg:col-span-1 flex pt-6 lg:pt-0 lg:w-auto w-full gap-5 justify-center">
<ul class="order-2 col-span-2 lg:col-span-1 flex pt-6 lg:pt-0 lg:w-auto w-full gap-3 justify-center">
<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="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 relative overflow-hidden px-4 py-2"
classList={{
"border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250":
"text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20":
!notSolidCore() && !translatedLocale(),
}}
addLocale
Expand All @@ -96,8 +96,8 @@ 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="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
addLocale
>
Router
Expand All @@ -106,8 +106,8 @@ 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="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
addLocale
>
SolidStart
Expand All @@ -116,8 +116,8 @@ 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="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
addLocale
>
Meta
Expand Down