Show selected page on left navigation.

Author: nzbdav-dev

frontend/app/routes/_index/components/left-navigation/left-navigation.module.css

@@ -25,15 +25,20 @@
     color: inherit;
 }
 
-@media not (pointer: coarse), (min-width: 900px)  {
-    .item:hover {
-        background-color: #002b36;
+@media not (pointer: coarse), (min-width: 900px) {
+    .item:not(.selected):hover {
+        background-color: hsl(192, 100%, 8%);
         cursor: pointer;
     }
 }
 
-.item:active {
-    background-color: #073642;
+.item:not(.selected):active {
+    background-color: hsl(192, 80%, 14%);
+}
+
+.selected {
+    background-color: hsl(192, 100%, 11%);
+    user-select: none;
 }
 
 .queue-icon {

frontend/app/routes/_index/components/left-navigation/left-navigation.module.css.d.ts

@@ -12,6 +12,7 @@ declare const styles: {
   readonly "stream-icon": string;
   readonly "title": string;
   readonly "unstyled": string;
+  readonly "selected": string;
 };
 export = styles;
 

frontend/app/routes/_index/components/left-navigation/left-navigation.tsx

@@ -1,25 +1,23 @@
-import { Form, Link } from "react-router";
+import { Form, Link, useLocation, useNavigation } from "react-router";
 import styles from "./left-navigation.module.css";
+import { className } from "~/utils/styling";
+import type React from "react";
 
-export type LefNavigationProps = {
-}
-
-
-export function LeftNavigation(props: LefNavigationProps) {
+export function LeftNavigation() {
     return (
         <div className={styles.container}>
-            <Link className={styles.item} to={"/queue"}>
+            <Item target="/queue">
                 <div className={styles["queue-icon"]} />
                 <div className={styles.title}>Queue & History</div>
-            </Link>
-            <Link className={styles.item} to={"/explore"}>
+            </Item>
+            <Item target="/explore">
                 <div className={styles["explore-icon"]} />
                 <div className={styles.title}>Dav Explore</div>
-            </Link>
-            <Link className={styles.item} to={"/settings"}>
+            </Item>
+            <Item target="/settings">
                 <div className={styles["settings-icon"]} />
                 <div className={styles.title}>Settings</div>
-            </Link>
+            </Item>
 
             <div className={styles.footer}>
                 <div className={styles["footer-item"]}>
@@ -45,4 +43,17 @@ export function LeftNavigation(props: LefNavigationProps) {
             </div>
         </div>
     );
+}
+
+function Item({ target, children }: { target: string, children: React.ReactNode }) {
+    const location = useLocation();
+    const navigation = useNavigation();
+    const pathname = navigation.location?.pathname ?? location.pathname;
+    const isSelected = pathname.startsWith(target);
+    const classes = [styles.item, isSelected ? styles.selected : null];
+    return <>
+        <Link {...className(classes)} to={target}>
+            {children}
+        </Link>
+    </>;
 }

frontend/app/routes/_index/components/top-navigation/top-navigation.module.css

@@ -26,6 +26,7 @@
 }
 
 .logo {
+    width: 26.23px;
     height: 30px;
     margin: auto;
 }