From 2c4aae47c7f8d5b749acda906edf2dbdd3c959b8 Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Sat, 25 Oct 2025 21:33:17 -0700
Subject: [PATCH] design: improve hover effects for tabnav

---
 src/lib/ui/layout/Shell.svelte      |  3 +-
 src/lib/ui/layout/pages/Tabs.svelte | 74 +++++++++++++++++++++++++----
 src/lib/ui/navbar/NavButton.svelte  | 13 ++++-
 src/lib/ui/navbar/Navbar.svelte     |  8 +++-
 4 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/src/lib/ui/layout/Shell.svelte b/src/lib/ui/layout/Shell.svelte
index 36563349..50897026 100644
--- a/src/lib/ui/layout/Shell.svelte
+++ b/src/lib/ui/layout/Shell.svelte
@@ -174,6 +174,7 @@
         background-color: var(--color-slate-50);
         z-index: 40;
         width: 100%;
+        overflow: auto;
 
         @variant dark {
           background-color: var(--color-zinc-950);
@@ -185,7 +186,7 @@
         width: 100% !important;
         @variant md {
           display: flex;
-          top: calc(var(--spacing) * 16);
+          top: calc(var(--spacing) * 14.5);
           max-height: calc(100vh - 4rem);
         }
       }
diff --git a/src/lib/ui/layout/pages/Tabs.svelte b/src/lib/ui/layout/pages/Tabs.svelte
index c14a158a..73b3b175 100644
--- a/src/lib/ui/layout/pages/Tabs.svelte
+++ b/src/lib/ui/layout/pages/Tabs.svelte
@@ -56,10 +56,8 @@
 
 <nav
   class={[
-    'flex flex-row items-center sm:mt-0 flex-wrap z-20',
-    style == 'header'
-      ? 'p-1 gap-x-8 gap-y-4 justify-center sm:justify-start'
-      : 'gap-2',
+    'tab-bar',
+    style == 'header' ? 'bar-header' : 'gap-2',
     margin && 'my-2',
     margin && style == 'subpage' && 'mb-3',
   ]}
@@ -74,12 +72,7 @@
       <a
         onclick={() => invalidateAll()}
         href={buildUrl(currentRoute, route.href)}
-        class={[
-          'rounded-full font-medium transition-colors duration-100 relative z-0 shrink-0 hover:text-slate-900 hover:dark:text-zinc-100',
-          selected
-            ? 'tab-selected text-primary-900 dark:text-primary-100 hover:cursor-default'
-            : 'text-slate-500 dark:text-zinc-500',
-        ]}
+        class={['tab-item ', selected && 'tab-selected']}
       >
         {route.name}
       </a>
@@ -93,8 +86,44 @@
 </nav>
 
 <style>
+  @reference '../../../../app.css';
+  .tab-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    z-index: 20;
+
+    @variant sm {
+      margin-top: 0;
+    }
+
+    margin-left: calc(var(--spacing) * -3);
+    margin-right: calc(var(--spacing) * -3);
+    margin-top: calc(var(--spacing) * -1);
+  }
+
+  .tab-bar.bar-header {
+    padding: calc(var(--spacing));
+    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+    justify-content: center;
+
+    @variant sm {
+      justify-content: start;
+    }
+  }
+
   .tab-selected {
     position: relative;
+    color: var(--color-primary-900);
+
+    @variant dark {
+      color: var(--color-primary-100);
+    }
+
+    @variant hover {
+      cursor: default !important;
+    }
   }
 
   .tab-selected::before {
@@ -104,4 +133,29 @@
     z-index: -10;
     border-radius: 9999px;
   }
+
+  .tab-item {
+    &:not(.tab-selected) {
+      color: var(--color-slate-500);
+
+      @variant dark {
+        color: var(--color-zinc-500);
+      }
+    }
+    padding: calc(var(--spacing)) calc(var(--spacing) * 3);
+    border-radius: var(--radius-xl);
+    font-weight: var(--font-weight-medium);
+    transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 75ms;
+    z-index: 0;
+    flex-shrink: 0;
+
+    @variant hover {
+      color: var(--color-slate-900);
+      background-color: var(--color-slate-200);
+      @variant dark {
+        color: var(--color-zinc-100);
+        background-color: var(--color-zinc-800);
+      }
+    }
+  }
 </style>
diff --git a/src/lib/ui/navbar/NavButton.svelte b/src/lib/ui/navbar/NavButton.svelte
index d9acf49b..e5b831bd 100644
--- a/src/lib/ui/navbar/NavButton.svelte
+++ b/src/lib/ui/navbar/NavButton.svelte
@@ -34,7 +34,7 @@
 <Button
   {...rest}
   color="none"
-  rounding="none"
+  rounding="xl"
   class={[
     'nav-btn',
     adaptive && 'nav-btn-dynamic',
@@ -82,6 +82,9 @@
     .nav-btn {
       width: calc(var(--spacing) * 10);
       height: calc(var(--spacing) * 10);
+      @variant md {
+        height: calc(var(--spacing) * 8);
+      }
       transition: 75ms cubic-bezier(0.075, 0.82, 0.165, 1);
 
       color: var(--color-slate-500);
@@ -95,6 +98,13 @@
         @variant dark {
           color: var(--color-zinc-50);
         }
+
+        @variant md {
+          background-color: var(--color-slate-200);
+          @variant dark {
+            background-color: var(--color-zinc-800);
+          }
+        }
       }
 
       transition-property: color;
@@ -103,6 +113,7 @@
     .nav-btn-dynamic {
       @variant md {
         width: max-content;
+        padding: calc(var(--spacing)) calc(var(--spacing) * 3);
       }
     }
 
diff --git a/src/lib/ui/navbar/Navbar.svelte b/src/lib/ui/navbar/Navbar.svelte
index c4550d89..9d2ea9e8 100644
--- a/src/lib/ui/navbar/Navbar.svelte
+++ b/src/lib/ui/navbar/Navbar.svelte
@@ -180,7 +180,13 @@
     }
 
     @variant md {
-      gap: calc(var(--spacing) * 6);
+      gap: calc(var(--spacing) * 1);
+    }
+  }
+
+  .navbar button:last-of-type {
+    @variant md {
+      margin-left: calc(var(--spacing) * 2);
     }
   }
 </style>
-- 
2.51.2