Updates

src/layouts/admin/(partials)/admin-aside-links-dict.tsx

@@ -3,6 +3,21 @@ import LinkList from "@/src/components/twui/elements/LinkList";
 import Stack from "@/src/components/twui/layout/Stack";
 import { AppContext } from "@/src/pages/__root";
 import { useContext } from "react";
+import { LayoutDashboard, LogOut, Server, Settings, Users } from "lucide-react";
+
+const sectionLabel = (label: string) => (
+    <div className="px-3 pt-6 pb-1.5 text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
+        {label}
+    </div>
+);
+
+const linkClassName =
+    "px-3 py-2 w-full rounded-[5px] no-underline! border-b-0! " +
+    "text-[14px] font-medium text-foreground-light/70 dark:text-foreground-dark/70 " +
+    "hover:text-foreground-light! dark:hover:text-foreground-dark! " +
+    "hover:bg-foreground-light/5 dark:hover:bg-foreground-dark/5 transition-colors";
+
+const iconClassName = "shrink-0 opacity-60";
 
 export default function AdminAsideLinks() {
     const { pageProps } = useContext(AppContext);
@@ -13,29 +28,46 @@ export default function AdminAsideLinks() {
     }
 
     const links: TWUILink[] = [
+        { component: sectionLabel("Overview") },
         {
             title: "Dashboard",
             url: "/admin",
             strict: true,
+            icon: (
+                <LayoutDashboard
+                    size={16}
+                    strokeWidth={2}
+                    className={iconClassName}
+                />
+            ),
         },
+        { component: sectionLabel("WireGuard") },
         {
             title: "Clients",
             url: "/admin/clients",
+            icon: (
+                <Users size={16} strokeWidth={2} className={iconClassName} />
+            ),
         },
         {
             title: "Host",
             url: "/admin/host",
+            icon: <Server size={16} strokeWidth={2} className={iconClassName} />,
         },
-        {
-            component: <div className="h-10"></div>,
-        },
+        { component: sectionLabel("Account") },
         {
             title: "Settings",
             url: "/admin/settings",
+            icon: (
+                <Settings size={16} strokeWidth={2} className={iconClassName} />
+            ),
         },
         {
             title: "Logout",
             url: "/auth/logout",
+            icon: (
+                <LogOut size={16} strokeWidth={2} className={iconClassName} />
+            ),
         },
     ];
 
@@ -43,11 +75,8 @@ export default function AdminAsideLinks() {
         <Stack className="w-full items-stretch">
             <LinkList
                 links={links}
-                className="gap-1 flex-col items-start"
-                linkProps={{
-                    className: "px-4 py-3 w-full",
-                }}
-                divider
+                className="gap-0.5 flex-col items-start pb-6"
+                linkProps={{ className: linkClassName }}
             />
         </Stack>
     );