Mobile Sidebar Block

1"use client";
2 
3import { Home, Menu, Settings, Users } from "lucide-react";
4 
5import { Button } from "@/components/ui/atoms/button";
6import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/molecules/sheet";
7import {
8  Sidebar,
9  SidebarContent,
10  SidebarGroup,
11  SidebarGroupLabel,
12  SidebarHeader,
13  SidebarMenu,
14  SidebarMenuItem,
15} from "@/components/ui/organisms/sidebar";
16 
17function MobileSidebarBlock() {
18  return (
19    <div data-slot="mobile-sidebar-block">
20      <Sheet>
21        <SheetTrigger asChild>
22          <Button variant="outline" size="icon" aria-label="Open workspace navigation">
23            <Menu className="size-4" />
24          </Button>
25        </SheetTrigger>
26        <SheetContent side="left" surface="glass" className="w-[min(88vw,20rem)] p-0" showClose>
27          <SheetTitle className="sr-only">Workspace navigation</SheetTitle>
28          <Sidebar variant="default" className="h-full w-full border-0">
29            <SidebarHeader className="font-semibold">Poyraz Workspace</SidebarHeader>
30            <SidebarContent>
31              <SidebarGroup>
32                <SidebarGroupLabel>Navigation</SidebarGroupLabel>
33                <SidebarMenu>
34                  <SidebarMenuItem active icon={<Home className="size-4" />}>
35                    Overview
36                  </SidebarMenuItem>
37                  <SidebarMenuItem icon={<Users className="size-4" />}>Team</SidebarMenuItem>
38                  <SidebarMenuItem icon={<Settings className="size-4" />}>Settings</SidebarMenuItem>
39                </SidebarMenu>
40              </SidebarGroup>
41            </SidebarContent>
42          </Sidebar>
43        </SheetContent>
44      </Sheet>
45    </div>
46  );
47}
48 
49export { MobileSidebarBlock };