update: sidebar styles with routes

src/components/window/Card.tsx

@@ -8,7 +8,7 @@ interface CardProps {
 const Card = ({ children }: CardProps) => {
   return (
     <div
-      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border w-full rounded-lg bg-gradient-to-br from-white/80 to-white/70 border-black/[6%]"
+      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border w-full rounded-lg bg-gradient-to-br from-white/50 to-white/40 border-black/[6%]"
       data-tauri-drag-region
     >
       {children}

src/components/window/SideBar.tsx

@@ -2,34 +2,58 @@
 import { ReactNode } from "react"
 import clsx from "clsx"
 import { Home, MonitorOne, Movie, Setting, Terminal, Toolkit } from "@icon-park/react"
-import { useRouter } from "next/navigation"
+import { useRouter, usePathname } from "next/navigation"
+
 // import { platform } from "@tauri-apps/plugin-os"
 import useAppStore from "@/store/app"
 
 interface SideButtonProps {
+  route: string
   className?: string
   children?: ReactNode
 }
 
 const SideButton = ({
+  route,
   className,
   children,
   ...rest
 }: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const router = useRouter()
+  const path = usePathname()
+
   return (
-    <button className={clsx(className, "p-2.5 hover:bg-black/5 rounded-lg transition")} {...rest}>
+    <button
+      onClick={() => router.push(route || "/")}
+      className={clsx(
+        className,
+        "p-2.5 hover:bg-black/5 rounded-lg transition relative",
+        path.startsWith(route) && "bg-black/5"
+      )}
+      {...rest}
+    >
       {children}
+      <div
+        className={clsx(
+          path === route && "opacity-100",
+          "transition-opacity duration-300 opacity-0 h-3.5 w-0.5 absolute left-0.5 bg-purple-500 rounded-full top-1/2 -translate-y-1/2"
+        )}
+      />
     </button>
   )
 }
 
 const Avatar = () => {
   const router = useRouter()
+  const path = usePathname()
 
   return (
     <div
       onClick={() => router.push("/users")}
-      className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer"
+      className={clsx(
+        "w-12 h-12 bg-gray-700 rounded-full shadow-2xl cursor-pointer transition active:scale-95 shadow-purple-800",
+        path.startsWith("/users") && "shadow-sm"
+      )}
     >
       <img src="favicon.ico" alt="avatar" draggable={false} />
     </div>
@@ -37,13 +61,12 @@ const Avatar = () => {
 }
 
 const SideBar = () => {
-  const router = useRouter()
   const { version, setVersion } = useAppStore()
 
   return (
     <div
       className={clsx(
-        "absolute left-0 flex flex-col h-full select-none w-20 py-7",
+        "absolute left-0 flex flex-col h-full select-none w-20 py-7"
         // platform() === "windows" ? "w-20" : "w-[4.25rem]"
       )}
       data-tauri-drag-region
@@ -56,22 +79,22 @@ const SideBar = () => {
         className="flex flex-col items-center justify-center h-full gap-5"
         data-tauri-drag-region
       >
-        <SideButton onClick={() => router.push("/home")}>
+        <SideButton route="/home">
           <Home size={24} />
         </SideButton>
-        <SideButton onClick={() => router.push("/tool")}>
+        <SideButton route="/tool">
           <Toolkit size={24} />
         </SideButton>
-        <SideButton onClick={() => router.push("/console")}>
+        <SideButton route="/console">
           <Terminal size={24} />
         </SideButton>
-        <SideButton onClick={() => router.push("/gear")}>
+        <SideButton route="/gear">
           <MonitorOne size={24} />
         </SideButton>
-        <SideButton onClick={() => router.push("/movie")}>
+        <SideButton route="/movie">
           <Movie size={24} />
         </SideButton>
-        <SideButton onClick={() => router.push("/preference")}>
+        <SideButton route="/preference">
           <Setting size={24} />
         </SideButton>
       </section>