import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui/sidebar/radix";

import {
  AwardIcon,
  ChartColumnStackedIcon,
  ChevronRightIcon,
  CircleQuestionMarkIcon,
  ClipboardListIcon,
  Clock8Icon,
  FolderIcon,
  PencilIcon,
  SettingsIcon,
  StarIcon,
  TrendingUpIcon,
  UserIcon,
} from "lucide-react";

type MenuSubItem = {
  label: string;
  href: string;
  badge?: string;
};

const pagesItems: MenuItem[] = [
  {
    icon: UserIcon,
    label: "Student Profile",
    href: "#",
  },
  {
    icon: TrendingUpIcon,
    label: "Progress",
    href: "#",
  },
  {
    icon: PencilIcon,
    label: "Assignments",
    href: "#",
    badge: "2",
  },
  {
    icon: Clock8Icon,
    label: "Schedule",
    href: "#",
  },
  {
    icon: FolderIcon,
    label: "Resources",
    items: [
      { label: "Course Materials", href: "#" },
      { label: "Lecture Notes", href: "#" },
      { label: "Additional Readings", href: "#", badge: "5" },
    ],
  },
  {
    icon: ClipboardListIcon,
    label: "Reports",
    href: "#",
  },
  {
    icon: AwardIcon,
    label: "Certificates",
    href: "#",
  },
];

const miscItems: MenuItem[] = [
  {
    icon: StarIcon,
    label: "Reviews",
    href: "#",
  },
  {
    icon: CircleQuestionMarkIcon,
    label: "FAQ",
    href: "#",
  },
  {
    icon: SettingsIcon,
    label: "Settings",
    items: [
      { label: "Profile Settings", href: "#" },
      { label: "General Preferences", href: "#" },
    ],
  },
];

type MenuItem = {
  icon: React.ComponentType<any>;
  label: string;
} & (
  | {
      href: string;
      badge?: string;
      items?: never;
    }
  | { href?: never; badge?: never; items: MenuSubItem[] }
);

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible/radix";

const menuItems: MenuItem[] = [
  {
    icon: ChartColumnStackedIcon,
    label: "Dashboard",
    href: "#",
    badge: "3",
  },
];

const SidebarGroupedMenuItems = ({
  data,
  groupLabel,
}: {
  data: MenuItem[];
  groupLabel?: string;
}) => {
  return (
    <SidebarGroup>
      {groupLabel && <SidebarGroupLabel>{groupLabel}</SidebarGroupLabel>}
      <SidebarGroupContent>
        <SidebarMenu>
          {data.map((item) =>
            item.items ? (
              <Collapsible className="group/collapsible" key={item.label}>
                <SidebarMenuItem test-id="olle">
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton tooltip={item.label} className="">
                      <item.icon />
                      <span>{item.label}</span>
                      <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items.map((subItem) => (
                        <SidebarMenuSubItem key={subItem.label}>
                          <SidebarMenuSubButton
                            className="justify-between"
                            asChild
                          >
                            <a href={subItem.href}>
                              {subItem.label}
                              {subItem.badge && (
                                <span className="bg-primary/10 flex h-5 min-w-5 items-center justify-center rounded-full text-xs">
                                  {subItem.badge}
                                </span>
                              )}
                            </a>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ) : (
              <SidebarMenuItem key={item.label}>
                <SidebarMenuButton tooltip={item.label} asChild>
                  <a href={item.href} className="">
                    <item.icon />
                    <span>{item.label}</span>
                  </a>
                </SidebarMenuButton>
                {item.badge && (
                  <SidebarMenuBadge className="bg-primary/10 rounded-full">
                    {item.badge}
                  </SidebarMenuBadge>
                )}
              </SidebarMenuItem>
            ),
          )}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  );
};
const SideBarPattern01 = () => {
  return (
    <Sidebar
      collapsible="offcanvas"
      className="**:data-[slot=sidebar-inner]:bg-stone-200 border-none"
    >
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              size="lg"
              className="gap-2.5 bg-transparent! [&>svg]:size-8"
              asChild
            >
              <a href="#">
                <span className="text-lg font-semibold">Drive</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent className="mt-12">
        {!open && <SidebarTrigger className="[&_svg]:size-5!" />}
        <SidebarGroupedMenuItems data={menuItems} />
        <SidebarGroupedMenuItems data={pagesItems} groupLabel="Pages" />
        <SidebarGroupedMenuItems data={miscItems} groupLabel="Misc" />
      </SidebarContent>
    </Sidebar>
  );
};

export default SideBarPattern01;
Sidebar Pattern

Default

We use cookies
