WOOHOO

components/layout/sidebar.tsx

@@ -7,11 +7,28 @@ import { ShoppingCart, LogOut } from "lucide-react"
 import { NavItem } from "./nav-item"
 import { Button } from "@/components/ui/button"
 import { sidebarConfig } from "@/config/sidebar"
+import { logoutUser } from "@/lib/auth-utils"
+import { toast } from "sonner"
 
 const Sidebar: React.FC = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   const router = useRouter()
 
+  const handleLogout = async () => {
+    try {
+      // Show toast notification for better user experience
+      toast.success("Logging out...");
+      
+      // Perform the logout
+      await logoutUser();
+      
+      // The logoutUser function will handle the redirect
+    } catch (error) {
+      console.error("Error during logout:", error);
+      toast.error("Failed to logout. Please try again.");
+    }
+  };
+
   return (
     <>
       <nav
@@ -48,7 +65,7 @@ const Sidebar: React.FC = () => {
 
           <div className="p-4 border-t border-border">
             <Button
-              onClick={() => {}}
+              onClick={handleLogout}
               variant="ghost"
               className="w-full justify-start text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-background"
             >