fix: highlight selected route in sidebar

also introduces some style changes

Author: h16nning

src/app/notebook/NotebookView.module.css

@@ -3,7 +3,10 @@
     border: solid 1px var(--mantine-color-light-border);
     cursor: pointer;
 
-    p, div, ul, ol {
+    p,
+    div,
+    ul,
+    ol {
         margin: 0;
     }
     ul {
@@ -27,4 +30,4 @@
     &.dragging {
         box-shadow: var(--mantine-shadow-md);
     }
-}
+}

src/app/shell/Sidebar/Sidebar.module.css

@@ -1,75 +1,67 @@
 .sidebar {
-  width: var(--mantine-sidebar-width);
-  height: 100%;
-  & .topRow {
-    display: flex;
-    padding-left: var(--mantine-spacing-xs);
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    height: 3.25rem;
-    justify-content: space-between;
-    align-items: center;
-  }
-  & .sidebarItem {
-    border-radius: var(--mantine-radius-sm);
-
-    &[data-active] span {
-      font-weight: 600;
-      color: swap(theme, "primary", 6, 6);
+    width: var(--mantine-sidebar-width);
+    height: 100%;
+    & .topRow {
+        display: flex;
+        padding-left: var(--mantine-spacing-xs);
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        height: 3.25rem;
+        justify-content: space-between;
+        align-items: center;
     }
 
-    &:active {
-      transform: scale(0.99);
-    }
+    & .sidebarItem {
+        transition: none;
+        border-radius: var(--mantine-radius-sm);
 
-    & .sidebarItemLabel {
-      font-size: var(--mantine-font-size-sm);
-      font-weight: 300;
-    }
+        & .sidebarItemLabel {
+            font-size: var(--mantine-font-size-sm);
+        }
 
-    & .sidebarItemIcon {
-      svg {
-        stroke-width: 1.5px;
-        width: 1.2rem;
-      }
+        & .sidebarItemIcon {
+            svg {
+                stroke-width: 1.5px;
+                width: 1.2rem;
+            }
+        }
     }
-  }
 
-  /*MINIMAL MODE*/
-  &.minimalMode {
-    width: 3.5rem;
-    display: inline-block;
-    padding: var(--mantine-spacing-md) var(--mantine-spacing-xs);
-    & .topRow {
-      display: none;
-    }
-    & .sidebarItem {
-      gap: 0;
-      padding: 0.5rem;
-      width: 2.5rem;
-      justify-content: center;
-      & .sidebarItemBody {
-        display: none;
-      }
-      & .sidebarItemIcon {
-        margin-right: 0;
-      }
+    /*MINIMAL MODE*/
+    &.minimalMode {
+        width: 3.5rem;
+        display: inline-block;
+        padding: var(--mantine-spacing-md) var(--mantine-spacing-xs);
+        & .topRow {
+            display: none;
+        }
+        & .sidebarItem {
+            gap: 0;
+            padding: 0.5rem;
+            width: 2.5rem;
+            justify-content: center;
+            & .sidebarItemBody {
+                display: none;
+            }
+            & .sidebarItemIcon {
+                margin-right: 0;
+            }
+        }
     }
-  }
 
-  /*FULLSCREEN MODE*/
-  &.fullscreenMode {
-    width: "100%";
-    visible: hidden;
-    transform: translateX(-100vw);
-    transition: transform 200ms ease-in-out;
-    box-shadow: var(--mantine-shadow-xl);
-    &.landscapeMode {
-      transform: translateX(-100vh);
-    }
-    &.fullscreenModeOpened {
-      transform: translateX(0);
-      visible: visible;
+    /*FULLSCREEN MODE*/
+    &.fullscreenMode {
+        width: "100%";
+        visible: hidden;
+        transform: translateX(-100vw);
+        transition: transform 200ms ease-in-out;
+        box-shadow: var(--mantine-shadow-xl);
+        &.landscapeMode {
+            transform: translateX(-100vh);
+        }
+        &.fullscreenModeOpened {
+            transform: translateX(0);
+            visible: visible;
+        }
     }
-  }
 }

src/app/shell/Sidebar/Sidebar.tsx

@@ -20,7 +20,7 @@ import {
 } from "@tabler/icons-react";
 import cx from "clsx";
 import { t } from "i18next";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import classes from "./Sidebar.module.css";
 
 import SpotlightCard from "../Spotlight/Spotlight";
@@ -43,6 +43,8 @@ const InteractiveNavLink = ({
   closeMenu: () => void;
 }) => {
   const navigate = useNavigate();
+  const location = useLocation();
+
   return (
     <Tooltip
       label={label}
@@ -57,7 +59,7 @@ const InteractiveNavLink = ({
           label: classes.sidebarItemLabel,
           section: classes.sidebarItemIcon,
         }}
-        variant="subtle"
+        variant="filled"
         label={label}
         leftSection={icon}
         onClick={() => {
@@ -126,6 +128,7 @@ function Sidebar({
           </Group>
           <SpotlightCard minimalMode={minimalMode} />
 
+<Stack gap={0}>
           <InteractiveNavLink
             label={t("home.title")}
             path="/home"
@@ -166,7 +169,7 @@ function Sidebar({
             minimalMode={minimalMode}
             fullscreenMode={fullscreenMode}
             closeMenu={menuHandlers.close}
-          />
+          /></Stack>
           <DeckList minimalMode={minimalMode} />
         </Stack>
         <CloudSection minimalMode={minimalMode} />