jamsrui_sidebar_component_quickstart_with_toggle_state.ts

1"use client";
2
3import React, { useState } from "react";
4import {
5  Sidebar,
6  SidebarContent,
7  SidebarHeader,
8  SidebarItem,
9  SidebarMenu,
10} from "@jamsrui/sidebar";
11
12const SidebarQuickstart = () => {
13  const [isOpen, setIsOpen] = useState(true);
14
15  return (
16    <div style={{ display: "flex", height: "100vh" }}>
17      <Sidebar isOpen={isOpen} onOpenChange={setIsOpen}>
18        <SidebarHeader>
19          <div style={{ padding: "1rem", fontWeight: "bold" }}>My App</div>
20        </SidebarHeader>
21        <SidebarContent>
22          <SidebarMenu>
23            <SidebarItem href="/">Home</SidebarItem>
24            <SidebarItem href="/dashboard">Dashboard</SidebarItem>
25            <SidebarItem href="/settings">Settings</SidebarItem>
26          </SidebarMenu>
27        </SidebarContent>
28      </Sidebar>
29      <main style={{ flex: 1, padding: "1rem" }}>
30        <button onClick={() => setIsOpen(!isOpen)}>Toggle Sidebar</button>
31        <h1>Main Content</h1>
32        <p>This is where your main application content goes.</p>
33      </main>
34    </div>
35  );
36};
37
38export default SidebarQuickstart;