inventory/inventory/src/components/layout/AppSidebar.tsx

import {
  Home,
  Package,
  BarChart2,
  Settings,
  Box,
  ClipboardList,
  LogOut,
  Users,
  Tags,
  FileSpreadsheet,
} from "lucide-react";
import { IconCrystalBall } from "@tabler/icons-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarSeparator,
} from "@/components/ui/sidebar";
import { useLocation, useNavigate, Link } from "react-router-dom";

const items = [
  {
    title: "Overview",
    icon: Home,
    url: "/",
  },
  {
    title: "Products",
    icon: Package,
    url: "/products",
  },
  {
    title: "Import",
    icon: FileSpreadsheet,
    url: "/import",
  },
  {
    title: "Forecasting",
    icon: IconCrystalBall,
    url: "/forecasting",
  },
  {
    title: "Categories",
    icon: Tags,
    url: "/categories",
  },
  {
    title: "Vendors",
    icon: Users,
    url: "/vendors",
  },
  {
    title: "Purchase Orders",
    icon: ClipboardList,
    url: "/purchase-orders",
  },
  {
    title: "Analytics",
    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>
        </div>
      </SidebarHeader>
      <SidebarSeparator />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => {
                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}
                    >
                      <Link to={item.url}>
                        <item.icon className="h-4 w-4" />
                        <span className="group-data-[collapsible=icon]:hidden">
                          {item.title}
                        </span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarSeparator />

        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton
                  asChild
                  tooltip="Settings"
                  isActive={location.pathname === "/settings"}
                >
                  <Link to="/settings">
                    <Settings className="h-4 w-4" />
                    <span className="group-data-[collapsible=icon]:hidden">
                      Settings
                    </span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </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>
  );
}