Sidebar

import * as React from "react";
import { House, Inbox, Star, User } from "@/components/ui/icons";
import { Sidebar, SidebarItem } from "@/components/ui/sidebar-item";

export default function Example() {
  const [here, setHere] = React.useState("orders");
  const go = (id: string) => (e: React.MouseEvent) => { e.preventDefault(); setHere(id); };
  return (
    <Sidebar style={{ width: 240, maxWidth: "100%" }}>
      <SidebarItem href="#home" icon={<House />} active={here === "home"} onClick={go("home")}>Home</SidebarItem>
      <SidebarItem href="#orders" icon={<Inbox />} badge={12} active={here === "orders"} onClick={go("orders")}>Orders</SidebarItem>
      <SidebarItem href="#customers" icon={<User />} trailingChevron active={here === "customers"} onClick={go("customers")}>Customers</SidebarItem>
      <SidebarItem href="#reports" icon={<Star />} disabled>Reports</SidebarItem>
    </Sidebar>
  );
}