refactor(nav): unify navigation links with Button asChild pattern

components/account-sidebar.tsx

@@ -3,6 +3,7 @@
 import { Bell, CreditCard, Settings, ShieldCheck } from "lucide-react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
+import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 
 const links = [
@@ -23,19 +24,17 @@ export function AccountSidebar() {
           const Icon = link.icon
           const isActive = pathname === link.href
           return (
-            <Link
+            <Button
               key={link.href}
-              href={link.href}
-              className={cn(
-                "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-                isActive
-                  ? "bg-accent text-accent-foreground"
-                  : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
-              )}
+              variant={isActive ? "secondary" : "ghost"}
+              className={cn("w-full justify-start", !isActive && "text-muted-foreground")}
+              asChild
             >
-              <Icon className="h-4 w-4" />
-              {link.label}
-            </Link>
+              <Link href={link.href}>
+                <Icon className="h-4 w-4" />
+                {link.label}
+              </Link>
+            </Button>
           )
         })}
       </nav>