Sidebar Container

1import { SidebarContainer } from "passport-ui";
2import {
3  SidebarGroup,
4  SidebarGroupContent,
5  SidebarGroupLabel,
6  SidebarMenu,
7  SidebarMenuButton,
8  SidebarMenuItem,
9  SidebarProvider,
10} from "passport-ui";
11import { useState } from "react";

1function MySidebar() {
2  const [searchText, setSearchText] = useState("");
3 
4  return (
5    <SidebarProvider>
6      <SidebarContainer
7        searchConfig={{
8          searchText,
9          setSearchText,
10          placeholder: "Search navigation…",
11        }}
12        sidebarHeader={
13          <div className="meta-container">
14            <h3>My App</h3>
15            <p>Version 1.0.0</p>
16          </div>
17        }
18        sidebarFooter={
19          <Button>
20            <Mail />
21            Support
22          </Button>
23        }
24      >
25        <SidebarGroup>
26          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
27          <SidebarGroupContent>
28            <SidebarMenu>
29              <SidebarMenuItem>
30                <SidebarMenuButton asChild>
31                  <Link href="/dashboard">
32                    <Home className="size-4" />
33                    Dashboard
34                  </Link>
35                </SidebarMenuButton>
36              </SidebarMenuItem>
37              <SidebarMenuItem>
38                <SidebarMenuButton asChild>
39                  <Link href="/users">
40                    <Users className="size-4" />
41                    Users
42                  </Link>
43                </SidebarMenuButton>
44              </SidebarMenuItem>
45            </SidebarMenu>
46          </SidebarGroupContent>
47        </SidebarGroup>
48      </SidebarContainer>
49    </SidebarProvider>
50  );
51}