Sidebar

import { Sidebar } from "@smartacteam/ui/sidebar";

<Sidebar.Provider>
    <Sidebar.Root variant="sidebar" collapsible="icon">
      <Sidebar.Rail />
      <Sidebar.Header>
        <Sidebar.Menu>
          <Sidebar.MenuItem>
            <Sidebar.MenuButton size="lg" asChild>
              <a href="#">
                <div className="bg-base-accent text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                  <GalleryVerticalEndIcon className="text-base-accent-foreground size-5" />
                </div>
                <div>
                  <div className="font-medium">Documentation</div>
                  <div className="text-xs">v.1.0.1</div>
                </div>
              </a>
            </Sidebar.MenuButton>
          </Sidebar.MenuItem>
        </Sidebar.Menu>
      </Sidebar.Header>
      <Sidebar.Trigger />
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Application</Sidebar.GroupLabel>
          <Sidebar.GroupContent>
            <Sidebar.Menu>
              <Sidebar.MenuItem>
                <Sidebar.MenuButton asChild>
                  <a href="#">
                    <HouseIcon />
                    <span>Home</span>
                  </a>
                </Sidebar.MenuButton>
              </Sidebar.MenuItem>
              <Sidebar.MenuItem>
                <Sidebar.MenuButton asChild>
                  <a href="#">
                    <MailIcon />
                    <span>Inbox</span>
                  </a>
                </Sidebar.MenuButton>
              </Sidebar.MenuItem>
              <Sidebar.MenuItem>
                <Sidebar.MenuButton asChild>
                  <a href="#">
                    <CalendarIcon />
                    <span>Calendar</span>
                  </a>
                </Sidebar.MenuButton>
              </Sidebar.MenuItem>
            </Sidebar.Menu>
          </Sidebar.GroupContent>
        </Sidebar.Group>
      </Sidebar.Content>
      <Sidebar.Footer>
        <Sidebar.Menu>
          <Sidebar.MenuItem>
            <Sidebar.MenuButton size="lg" asChild>
              <a href="#">
                <div className="bg-base-accent text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                  <GalleryVerticalEndIcon className="text-base-accent-foreground size-5" />
                </div>
                <div>
                  <div className="font-medium">Me</div>
                  <div className="text-xs">me@example.com</div>
                </div>
              </a>
            </Sidebar.MenuButton>
          </Sidebar.MenuItem>
        </Sidebar.Menu>
      </Sidebar.Footer>
    </Sidebar.Root>
  </Sidebar.Provider>