From a50447f457ecc045995efb7b952b07ea09c91373 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 21 Nov 2024 10:14:22 +0100
Subject: [PATCH] feat(dashboard): improved a11y of active sidebar menu item

---
 src/components/dashboard/Dashboard.svelte | 100 +++++++++++-----------
 src/style.css                             |   4 +
 2 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/src/components/dashboard/Dashboard.svelte b/src/components/dashboard/Dashboard.svelte
index 44af6f0f..7dd6e77d 100644
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@@ -24,12 +24,12 @@
     </a>
     <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
       <a
-        class:bg-gray-100={$router.path === "/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class:activenav={$router.path === "/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         href="/"
       >
         <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
@@ -42,12 +42,12 @@
       </a>
       {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
         <a
-          class:bg-gray-100={$router.path.includes("/orgs/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path.includes("/orgs/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/orgs/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -63,15 +63,15 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
         <a
-          class:bg-gray-100={$router.path === "/users/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/users/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/users/"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             viewBox="0 0 24 24"
             ><path fill="none" d="M0 0h24v24H0z" />
@@ -84,12 +84,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
         <a
-          class:bg-gray-100={$router.path === "/groups/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/groups/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/groups/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -105,14 +105,14 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
         <a
-          class:bg-gray-100={$router.path === "/runners/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/runners/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/runners/"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -126,12 +126,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
         <a
-          class:bg-gray-100={$router.path === "/teams/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/teams/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/teams/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -147,12 +147,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
         <a
-          class:bg-gray-100={$router.path.includes("/donors/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path.includes("/donors/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/donors/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -168,12 +168,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
         <a
-          class:bg-gray-100={$router.path.includes("/donations/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path.includes("/donations/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/donations/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -189,12 +189,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
         <a
-          class:bg-gray-100={$router.path === "/tracks/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/tracks/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/tracks/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -210,12 +210,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
         <a
-          class:bg-gray-100={$router.path === "/cards/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/cards/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/cards/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -233,12 +233,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
         <a
-          class:bg-gray-100={$router.path === "/scans/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/scans/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/scans/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -255,13 +255,13 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
         <a
-          class:bg-gray-100={$router.path === "/contacts/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/contacts/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/contacts/"
         >
           <svg
             fill="currentColor"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             width="24"
@@ -276,12 +276,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
         <a
-          class:bg-gray-100={$router.path === "/scanstations/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/scanstations/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/scanstations/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -298,12 +298,12 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
         <a
-          class:bg-gray-100={$router.path === "/statsclients/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/statsclients/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/statsclients/"
         >
           <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
             fill="currentColor"
             width="24"
             height="24"
@@ -319,12 +319,12 @@
         </a>
       {/if}
       <a
-        class:bg-gray-100={$router.path === "/settings/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class:activenav={$router.path === "/settings/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         href="/settings/"
       >
         <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
@@ -338,12 +338,12 @@
         <span>{$_("settings")}</span>
       </a>
       <a
-        class:bg-gray-100={$router.path === "/about/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class:activenav={$router.path === "/about/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         href="/about/"
       >
         <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           stroke="currentColor"
@@ -358,14 +358,14 @@
       </a>
       <button
         tabindex="0"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         on:click={() => {
           AuthService.authControllerLogout();
           logout();
         }}
       >
         <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
           fill="currentColor"
           width="24"
           height="24"
diff --git a/src/style.css b/src/style.css
index b5c61c95..a463292b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
+.activenav {
+    @apply bg-gray-300;
+    @apply text-black;
+}
 @tailwind utilities;