Updates

src/layouts/admin/(partials)/MobileNav.tsx

@@ -9,6 +9,8 @@ import Stack from "@/src/components/twui/layout/Stack";
 
 export default function MobileNav() {
     const [open, setOpen] = React.useState(false);
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+    const panelRef = React.useRef<HTMLElement>(null);
 
     React.useEffect(() => {
         if (!open) return;
@@ -21,16 +23,19 @@ export default function MobileNav() {
         };
 
         document.addEventListener("keydown", onKey);
+        panelRef.current?.focus();
 
         return () => {
             document.body.style.overflow = prev;
             document.removeEventListener("keydown", onKey);
+            triggerRef.current?.focus();
         };
     }, [open]);
 
     return (
         <div className="flex xl:hidden">
             <button
+                ref={triggerRef}
                 type="button"
                 aria-label="Open menu"
                 aria-expanded={open}
@@ -48,10 +53,12 @@ export default function MobileNav() {
                         aria-hidden
                     />
                     <aside
+                        ref={panelRef}
+                        tabIndex={-1}
                         className={twMerge(
                             "fixed top-0 left-0 bottom-0 z-210",
                             "w-[min(280px,85vw)] bg-background-light dark:bg-background-dark",
-                            "flex flex-col shadow-xl",
+                            "flex flex-col shadow-xl outline-none",
                         )}
                         role="dialog"
                         aria-modal="true"
@@ -59,7 +66,7 @@ export default function MobileNav() {
                     >
                         <Row className="w-full justify-between items-center py-2 px-4 h-20 flex-nowrap">
                             <a href="/" onClick={() => setOpen(false)}>
-                                <LogoIcon icon_size={60} />
+                                <LogoIcon icon_size={40} />
                             </a>
                             <button
                                 type="button"

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>
     );

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

@@ -11,15 +11,15 @@ type Props = {
 
 export default function AdminAside({ className }: Props) {
     return (
-        <aside className={twMerge("min-w-[180px] mb-20", className)}>
-            <Stack className="w-full items-stretch gap-0!">
-                <Row className="py-2 px-4 h-20">
-                    <a href="/">
-                        <LogoIcon icon_size={60} />
+        <aside className={twMerge("w-[220px] shrink-0", className)}>
+            <Stack className="w-full items-stretch gap-0! sticky top-0 h-screen overflow-y-auto">
+                <Row className="px-4 h-20 flex items-center">
+                    <a href="/" className="no-underline! border-b-0!">
+                        <LogoIcon icon_size={40} />
                     </a>
                 </Row>
                 <Divider />
-                <nav className="w-full">
+                <nav className="w-full grow">
                     <AdminAsideLinks />
                 </nav>
                 <Divider />

src/layouts/admin/(partials)/header-page-title.tsx

@@ -0,0 +1,29 @@
+import { AppContext } from "@/src/pages/__root";
+import { ChevronRight } from "lucide-react";
+import { useContext } from "react";
+
+const SECTION_TITLES: Record<string, string> = {
+    "/admin": "Dashboard",
+    "/admin/clients": "Clients",
+    "/admin/host": "Host",
+    "/admin/settings": "Settings",
+};
+
+export default function HeaderPageTitle() {
+    const { pageProps } = useContext(AppContext);
+    const pathname = pageProps?.url?.pathname || "/admin";
+    const title = SECTION_TITLES[pathname] || "Admin";
+
+    return (
+        <span className="hidden xl:flex items-center gap-2 text-[14px] font-semibold text-foreground-light dark:text-foreground-dark">
+            <span className="font-medium text-foreground-light/50 dark:text-foreground-dark/50">
+                Admin
+            </span>
+            <ChevronRight
+                size={14}
+                className="text-foreground-light/30 dark:text-foreground-dark/30"
+            />
+            <span>{title}</span>
+        </span>
+    );
+}