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>
@@ -87,7 +112,9 @@ export function AppSidebar() {
                 >
                   <a href="/settings">
                     <Settings className="h-4 w-4" />
-                <span className="group-data-[collapsible=icon]:hidden">Settings</span>
+                    <span className="group-data-[collapsible=icon]:hidden">
+                      Settings
+                    </span>
                   </a>
                 </SidebarMenuButton>
               </SidebarMenuItem>
@@ -95,6 +122,18 @@ export function AppSidebar() {
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <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>
+      </SidebarFooter>
     </Sidebar>
   );
 }