feat: enhance Drawer and NavDrawer components with improved layout and visual effects

Author: hrgui

src/components/layout/Drawer.tsx

@@ -9,7 +9,7 @@ const Drawer = ({ isOpen = false, children, className, ...props }: Props) => {
   return (
     <aside
       className={classNames(
-        "sm:-translate-x-full transform top-0 left-0 w-64 bg-white dark:bg-zinc-900 fixed h-full overflow-auto ease-in-out transition-all duration-300 z-60",
+        "sm:-translate-x-full transform top-0 left-0 w-72 bg-surface-container-low fixed h-full overflow-auto ease-in-out transition-all duration-300 z-60 border-r border-outline-variant/50",
         {
           "translate-x-0": isOpen,
           "-translate-x-full": !isOpen,

src/components/nav/NavDrawer.tsx

@@ -14,10 +14,27 @@ type Props = {
 
 const NavDrawer = ({ isOpen = false, links, onLinkClicked }: Props) => {
   return (
-    <Drawer className="sm:hidden" isOpen={isOpen}>
-      <Logo className="flex items-center pl-5 h-16 border-b-2 border-gray-700 mb-2" />
-      {links.map((link) => cloneElement(link, { onClick: onLinkClicked }))}
-      <ThemeToggle variant="drawer" />
+    <Drawer className="sm:hidden graph-bg" isOpen={isOpen}>
+      {/* Top corner glow */}
+      <div className="pointer-events-none absolute -top-10 -left-10 h-40 w-40 rounded-full bg-primary/10 blur-3xl" />
+      {/* Logo header */}
+      <div className="relative flex items-center pl-5 h-16">
+        <Logo />
+        {/* bottom separator with glow */}
+        <span className="pointer-events-none absolute inset-x-4 bottom-0 h-px rounded-full bg-gradient-to-r from-transparent via-outline-variant to-transparent" />
+        <span className="pointer-events-none absolute inset-x-8 bottom-0 h-3 blur-md bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
+      </div>
+
+      {/* Nav links */}
+      <nav className="mt-2">
+        {links.map((link) => cloneElement(link, { onClick: onLinkClicked }))}
+      </nav>
+
+      {/* Footer */}
+      <div className="relative mt-2">
+        <span className="pointer-events-none absolute inset-x-4 top-0 h-px rounded-full bg-gradient-to-r from-transparent via-outline-variant to-transparent" />
+        <ThemeToggle variant="drawer" />
+      </div>
     </Drawer>
   );
 };

src/components/nav/NavLink.tsx

@@ -25,8 +25,8 @@ export const NavLink = ({
       className={classNames(
         "relative font-medium flex sm:justify-center items-center pl-6 pr-6 h-16 transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 focus-visible:ring-inset",
         isActive
-          ? "text-primary hover:text-primary bg-surface-container-high sm:rounded-none sm:bg-transparent"
-          : "text-on-surface hover:text-on-surface hover:bg-surface-container-high active:bg-surface-container"
+          ? "text-primary hover:text-primary bg-surface-container-high/50 sm:rounded-none sm:bg-transparent"
+          : "text-on-surface hover:text-on-surface hover:bg-surface-container-high/50 active:bg-surface-container"
       )}
       onClick={onClick}
       aria-current={isActive ? "page" : undefined}