From 6cce6116b8c804cbe6726fa4ce1b0f7efdf3663f Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Sun, 2 Aug 2026 02:04:12 -0400
Subject: [PATCH] refactor(sidebar): use next/link for client-side navigation

---
 src/components/frontend/blocks/NavCore.tsx    |  9 ++++----
 .../frontend/blocks/NavProjects.tsx           |  5 +++--
 .../frontend/blocks/NavSecondary.tsx          |  5 +++--
 src/components/frontend/blocks/NavUser.tsx    | 21 +++++++++++++++++--
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/frontend/blocks/NavCore.tsx b/src/components/frontend/blocks/NavCore.tsx
index eb8d43a..40239db 100644
--- a/src/components/frontend/blocks/NavCore.tsx
+++ b/src/components/frontend/blocks/NavCore.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import Link from "next/link"
 import { ChevronRight, type LucideIcon } from "lucide-react"
 
 import {
@@ -44,10 +45,10 @@ export function NavCore({
           <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
             <SidebarMenuItem>
               <SidebarMenuButton asChild tooltip={item.title}>
-                <a href={item.url}>
+                <Link href={item.url}>
                   <item.icon />
                   <span>{item.title}</span>
-                </a>
+                </Link>
               </SidebarMenuButton>
               {item.items?.length ? (
                 <>
@@ -62,10 +63,10 @@ export function NavCore({
                       {item.items?.map((subItem) => (
                         <SidebarMenuSubItem key={subItem.title}>
                           <SidebarMenuSubButton asChild>
-                            <a href={subItem.url}>
+                            <Link href={subItem.url}>
                               {subItem.icon ? <subItem.icon /> : null}
                               <span>{subItem.title}</span>
-                            </a>
+                            </Link>
                           </SidebarMenuSubButton>
                         </SidebarMenuSubItem>
                       ))}
diff --git a/src/components/frontend/blocks/NavProjects.tsx b/src/components/frontend/blocks/NavProjects.tsx
index 81d5805..62b23b4 100644
--- a/src/components/frontend/blocks/NavProjects.tsx
+++ b/src/components/frontend/blocks/NavProjects.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import Link from "next/link"
 import {
   Folder,
   MoreHorizontal,
@@ -43,10 +44,10 @@ export function NavProjects({
         {projects.map((item) => (
           <SidebarMenuItem key={item.name}>
             <SidebarMenuButton asChild>
-              <a href={item.url}>
+              <Link href={item.url}>
                 <item.icon />
                 <span>{item.name}</span>
-              </a>
+              </Link>
             </SidebarMenuButton>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
diff --git a/src/components/frontend/blocks/NavSecondary.tsx b/src/components/frontend/blocks/NavSecondary.tsx
index a931a7e..ee6b359 100644
--- a/src/components/frontend/blocks/NavSecondary.tsx
+++ b/src/components/frontend/blocks/NavSecondary.tsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import Link from "next/link"
 import { type LucideIcon } from "lucide-react"
 
 import {
@@ -26,10 +27,10 @@ export function NavSecondary({
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton asChild size="sm">
-                <a href={item.url}>
+                <Link href={item.url}>
                   <item.icon />
                   <span>{item.title}</span>
-                </a>
+                </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
           ))}
diff --git a/src/components/frontend/blocks/NavUser.tsx b/src/components/frontend/blocks/NavUser.tsx
index 028a0ca..152acaf 100644
--- a/src/components/frontend/blocks/NavUser.tsx
+++ b/src/components/frontend/blocks/NavUser.tsx
@@ -2,6 +2,8 @@
 
 import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, FileTextIcon, LogOut, Sparkles } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -30,6 +32,21 @@ export function NavUser({
   };
 }) {
   const { isMobile } = useSidebar();
+  const router = useRouter();
+  const [loggingOut, setLoggingOut] = useState(false);
+
+  const handleLogout = async () => {
+    setLoggingOut(true);
+    try {
+      await fetch("/api/users/logout", { method: "POST" });
+    } catch {
+      // ignore network errors; redirect anyway
+    } finally {
+      setLoggingOut(false);
+    }
+    router.push("/");
+    router.refresh();
+  };
 
   return (
     <SidebarMenu>
@@ -92,9 +109,9 @@ export function NavUser({
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => handleLogout()}>
               <LogOut />
-              Log out
+              {loggingOut ? "Logging out..." : "Log out"}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>