SideBar

The SideBar component is a versatile UI element that provides a vertical panel typically placed at the side of the screen. It serves as a navigation hub or a space for displaying additional content, such as menus, filters, or tools, that complements the main content area. The SideBar can be fixed, collapsible, or toggleable, offering flexibility in how it's used across different applications. SideBars are commonly found in dashboards, content management systems, or web applications where users need quick access to navigation links, filters, or settings. Their ability to house various interactive elements makes them ideal for enhancing user workflows, especially in data-heavy or multi-functional interfaces.

Code 

import SideBar from "@lumina-design/core/SideBar";

<SideBar
  static={false}
  isOpen={true}
  onToggle={(flag) => {
    setIsOpen(flag);
  }}
  className="bg-white max-h-[400px]"
>
  <nav className="p-4 hover:bg-slate-200 cursor-pointer">
    Dashboard
  </nav>
  <nav className="p-4 hover:bg-slate-200 cursor-pointer">
    Account
  </nav>
  <nav className="p-4 hover:bg-slate-200 cursor-pointer">
    Settings
  </nav>
  <nav className="p-4 hover:bg-slate-200 cursor-pointer">
    Terms
  </nav>
  <nav className="p-4 hover:bg-slate-200 cursor-pointer">
    Logout
  </nav>
</SideBar>