Add logout button

inventory/src/components/layout/AppSidebar.tsx

@@ -1,16 +1,26 @@
-import { Home, Package, ShoppingCart, BarChart2, Settings, Box, ClipboardList } from "lucide-react";
+import {
+  Home,
+  Package,
+  ShoppingCart,
+  BarChart2,
+  Settings,
+  Box,
+  ClipboardList,
+  LogOut,
+} from "lucide-react";
 import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
+  SidebarFooter,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
 } from "@/components/ui/sidebar";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const items = [
   {
@@ -38,18 +48,26 @@ const items = [
     icon: BarChart2,
     url: "/analytics",
   },
-  
 ];
 
 export function AppSidebar() {
   const location = useLocation();
-  
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    sessionStorage.removeItem('isLoggedIn');
+    sessionStorage.removeItem('token');
+    navigate('/login');
+  };
+
   return (
     <Sidebar collapsible="icon" variant="sidebar">
       <SidebarHeader>
         <div className="p-4 flex items-center gap-2 group-data-[collapsible=icon]:justify-center">
           <Box className="h-6 w-6 shrink-0" />
-          <h2 className="text-lg font-semibold group-data-[collapsible=icon]:hidden">Inventory Manager</h2>
+          <h2 className="text-lg font-semibold group-data-[collapsible=icon]:hidden">
+            Inventory Manager
+          </h2>
         </div>
       </SidebarHeader>
       <SidebarSeparator />
@@ -58,14 +76,21 @@ export function AppSidebar() {
           <SidebarGroupContent>
             <SidebarMenu>
               {items.map((item) => {
-                const isActive = location.pathname === item.url || 
+                const isActive =
+                  location.pathname === item.url ||
                   (item.url !== "/" && location.pathname.startsWith(item.url));
                 return (
                   <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton asChild tooltip={item.title} isActive={isActive}>
+                    <SidebarMenuButton
+                      asChild
+                      tooltip={item.title}
+                      isActive={isActive}
+                    >
                       <a href={item.url}>
                         <item.icon className="h-4 w-4" />
-                        <span className="group-data-[collapsible=icon]:hidden">{item.title}</span>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {item.title}
+                        </span>
                       </a>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
@@ -76,25 +101,39 @@ export function AppSidebar() {
         </SidebarGroup>
         <SidebarSeparator />
 
-      <SidebarGroup>
-        <SidebarGroupContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  asChild
+                  tooltip="Settings"
+                  isActive={location.pathname === "/settings"}
+                >
+                  <a href="/settings">
+                    <Settings className="h-4 w-4" />
+                    <span className="group-data-[collapsible=icon]:hidden">
+                      Settings
+                    </span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton 
-              asChild 
-              tooltip="Settings"
-              isActive={location.pathname === "/settings"}
-            >
-              <a href="/settings">
-                <Settings className="h-4 w-4" />
-                <span className="group-data-[collapsible=icon]:hidden">Settings</span>
-              </a>
+            <SidebarMenuButton asChild tooltip="Logout" onClick={handleLogout}>
+              <button>
+                <LogOut className="h-4 w-4" />
+                <span className="group-data-[collapsible=icon]:hidden">Logout</span>
+              </button>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
-        </SidebarGroupContent>
-      </SidebarGroup>
-      </SidebarContent>
+      </SidebarFooter>
     </Sidebar>
   );
-} 
+}