Sidebar Component

import { useState } from "react";

import { Sidebar, SidebarLayout, SidebarMain, SidebarTrigger } from "@syncfusion/react-navigations";
export default function App() {
  const [open, setOpen] = useState(false);
  return (
      <SidebarLayout>
          <Sidebar
              open={open}
              onOpenChange={(e) => setOpen(e.open)}
          >
              <nav>
                  <ul>
                      <li>Dashboard</li>
                      <li>Projects</li>
                      <li>Settings</li>
                  </ul>
              </nav>
          </Sidebar>
          <SidebarMain>
              <SidebarTrigger aria-label="Toggle navigation">
                  ☰
              </SidebarTrigger>
              <div>Dashboard Content</div>
          </SidebarMain>
      </SidebarLayout>
  );
}