fix: sidebar active styling

ndom91 · Jul 30, 2024 · 55eabef · 55eabef
1 parent 0c07fb2
commit 55eabef
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/apps/web/src/lib/components/SidebarContent.svelte b/apps/web/src/lib/components/SidebarContent.svelte
@@ -15,6 +15,8 @@
     toggleDrawer?.()
     goto(target)
   }
+
+  const activePath = $derived($page.url.pathname)
 </script>
 
 <div class="flex-grow p-4">
@@ -27,7 +29,7 @@
           data-sveltekit-preload-data="hover"
           class={cn(
             "flex relative items-center p-2 font-semibold rounded-md border-0 transition duration-500 outline-none focus:rounded-md focus:ring-2 focus:ring-offset-0 focus:outline-none dark:focus:ring-neutral-800 focus:ring-neutral-300",
-            $page.url.pathname === "/" && "ring-2 ring-neutral-300 dark:ring-neutral-800",
+            activePath === "/" && "active",
           )}
           onclickcapture={() => toggleAndNavigate("/")}
         >
@@ -77,7 +79,7 @@
           data-sveltekit-preload-data="hover"
           class={cn(
             "flex relative items-center p-2 font-semibold rounded-md border-0 transition duration-500 outline-none focus:rounded-md focus:ring-2 focus:ring-offset-0 focus:outline-none dark:focus:ring-neutral-800 focus:ring-neutral-300",
-            $page.url.pathname === "/bookmarks" && "ring-2 ring-neutral-300 dark:ring-neutral-800",
+            activePath === "/bookmarks" && "active",
           )}
           onclickcapture={() => toggleAndNavigate("/bookmarks")}
         >
@@ -126,7 +128,7 @@
           data-sveltekit-preload-data="hover"
           class={cn(
             "flex relative items-center p-2 font-semibold rounded-md border-0 transition duration-500 outline-none focus:rounded-md focus:ring-2 focus:ring-offset-0 focus:outline-none dark:focus:ring-neutral-800 focus:ring-neutral-300",
-            $page.url.pathname === "/feeds" && "ring-2 ring-neutral-300 dark:ring-neutral-800",
+            activePath === "/feeds" && "active",
           )}
           onclickcapture={() => toggleAndNavigate("/feeds")}
         >
@@ -176,7 +178,7 @@
           data-sveltekit-preload-data="hover"
           class={cn(
             "flex relative items-center p-2 font-semibold rounded-md border-0 transition duration-500 outline-none focus:rounded-md focus:ring-2 focus:ring-offset-0 focus:outline-none dark:focus:ring-neutral-800 focus:ring-neutral-300",
-            $page.url.pathname === "/archives" && "ring-2 ring-neutral-300 dark:ring-neutral-800",
+            activePath === "/archives" && "active",
           )}
           onclickcapture={() => toggleAndNavigate("/archives")}
         >
@@ -225,7 +227,7 @@
           data-sveltekit-preload-data="hover"
           class={cn(
             "flex relative items-center p-2 font-semibold rounded-md border-0 transition duration-500 outline-none focus:rounded-md focus:ring-2 focus:ring-offset-0 focus:outline-none dark:focus:ring-neutral-800 focus:ring-neutral-300",
-            $page.url.pathname === "/categories" && "ring-2 ring-neutral-300 dark:ring-neutral-800",
+            activePath === "/categories" && "active",
           )}
           onclickcapture={() => toggleAndNavigate("/categories")}
         >
@@ -275,7 +277,7 @@
           data-sveltekit-preload-data="hover"
           class={cn(
             "flex relative items-center p-2 font-semibold rounded-md border-0 transition duration-500 outline-none focus:rounded-md focus:ring-2 focus:ring-offset-0 focus:outline-none dark:focus:ring-neutral-800 focus:ring-neutral-300",
-            $page.url.pathname === "/tags" && "ring-2 ring-neutral-300 dark:ring-neutral-800",
+            activePath === "/tags" && "active",
           )}
           onclickcapture={() => toggleAndNavigate("/tags")}
         >
@@ -333,3 +335,12 @@
     </span>
   </div>
 </div>
+
+<style>
+  :global(button.active) {
+    @apply ring-2 ring-offset-transparent ring-neutral-400;
+  }
+  :global(html.dark button.active) {
+    @apply ring-neutral-800;
+  }
+</style>
diff --git a/apps/web/src/routes/(dashboard)/archives/+page.svelte b/apps/web/src/routes/(dashboard)/archives/+page.svelte
@@ -164,7 +164,7 @@
 </script>
 
 <svelte:head>
-  <title>BriefButler | Bookmarks</title>
+  <title>BriefButler | Archives</title>
   <meta name="description" content="RSS Feeds, Bookmarks and more!" />
 </svelte:head>