jamsrui_responsive_sidebar_layout_with_navigation_icons.ts

1import React from "react";
2import {
3  Sidebar,
4  SidebarContent,
5  SidebarFooter,
6  SidebarHeader,
7  SidebarItem,
8  SidebarLabel,
9  SidebarProvider,
10  SidebarTrigger,
11} from "@jamsrui/sidebar";
12import { Home, Settings, User } from "lucide-react";
13
14const App = () => {
15  return (
16    <SidebarProvider>
17      <div className="flex h-screen overflow-hidden">
18        <Sidebar>
19          <SidebarHeader className="p-4 font-bold border-b">
20            My App
21          </SidebarHeader>
22          <SidebarContent className="p-2 space-y-1">
23            <SidebarItem href="/" icon={<Home size={20} />}>
24              <SidebarLabel>Dashboard</SidebarLabel>
25            </SidebarItem>
26            <SidebarItem href="/profile" icon={<User size={20} />}>
27              <SidebarLabel>Profile</SidebarLabel>
28            </SidebarItem>
29            <SidebarItem href="/settings" icon={<Settings size={20} />}>
30              <SidebarLabel>Settings</SidebarLabel>
31            </SidebarItem>
32          </SidebarContent>
33          <SidebarFooter className="p-4 border-t">
34            <p className="text-xs text-gray-500">v1.0.0</p>
35          </SidebarFooter>
36        </Sidebar>
37        
38        <main className="flex-1 overflow-auto p-4">
39          <SidebarTrigger />
40          <h1 className="text-2xl font-bold mt-4">Welcome to Jamsr UI Sidebar</h1>
41          <p>This is your main content area.</p>
42        </main>
43      </div>
44    </SidebarProvider>
45  );
46};
47
48export default App;