Sidebar

The Sidebar component is a responsive navigation container that adapts between desktop and mobile layouts. It is composed of smaller modular components (SidebarDesktop, SidebarMobile, SidebarBase, SidebarItem) and can be customized with logos, items, and variants.

import { Sidebar } from "tawuniya/components";

Getting Started

⚠️ This component requires wrapping your app with MainProvider

import { MainProvider } from "tawuniya";

export default function AppLayout({ children }) {
  return <MainProvider>{children}</MainProvider>;
}

👉 View in Storybook

---

Props

Prop	Type	Default	Description
items	SidebarItem[]	[]	List of navigation items.
logo	{ expanded?: ReactNode; collapsed?: ReactNode }	-	Logo displayed in expanded/collapsed state.
itemVariants	Partial<ButtonProps>	-	Variants applied to all sidebar items.
activeVariants	Partial<Pick<ButtonProps, "variant" | "className">>	-	Variants applied to active sidebar items.
breakpoint	number	-	Screen width breakpoint to switch to mobile mode.
linkComponent	React.ElementType	"a"	Custom link component (e.g., NextLink).
defaultCollapsed	boolean	-	Initial collapsed state (desktop only).
footer	ReactNode	-	Footer content to be displayed.
header	ReactNode	-	Header content to be displayed.
showFooterWhenCollapsed	boolean	false	Whether to show footer when collapsed.
showHeaderWhenCollapsed	boolean	false	Whether to show header when collapsed.
className	string	-	Class name for the sidebar.
privileges	string[]	-	Privileges to filter items.

Sidebar Item

Each sidebar item is defined as:

interface SidebarItem {
  id: string;
  href: string;
  label: string;
  icon: IconName | string;
   isLocatedAtEnd?: boolean; // item displayed at the bottom
  active?: boolean;
}

Usage

Basic Example

<Sidebar
  defaultCollapsed={false}
  items={[
    {
      id: "1",
      href: "/dashboard",
      label: "Dashboard",
      icon: "home",
      active: true,
    },
    { id: "2", href: "/settings", label: "Settings", icon: "settings" },
    { id: "3", href: "/logout", label: "Logout", icon: "log-out",  isLocatedAtEnd: true },
  ]}
/>

With Custom Logo

<Sidebar
  logo={{
    expanded: <img src="/logo-full.svg" alt="Logo" />,
    collapsed: <img src="/logo-small.svg" alt="Logo" />,
  }}
  items={menuItems}
/>

With Custom Variants

<Sidebar
  items={menuItems}
  itemVariants={{
    size: "lg",
    variant: "smooth",
  }}
/>

With Next.js Link

import Link from "next/link";

export function Example() {
  return (
    <Sidebar
      linkComponent={Link}
      items={[{ id: "1", href: "/profile", label: "Profile", icon: "user" }]}
    />
  );
}

With React Router Link

import { Link } from "react-router-dom";

export function Example() {
  return (
    <Sidebar
      linkComponent={Link}
      items={[{ id: "1", href: "/profile", label: "Profile", icon: "user" }]}
    />
  );
}

With Privileges

<Sidebar
  items={[
    {
      id: "1",
      href: "/dashboard",
      label: "Dashboard",
      icon: "home",
      active: true,
      allowedPrivileges: ["pr-1"],
    },
    {
      id: "2",
      href: "/settings",
      label: "Settings",
      icon: "settings",
      allowedPrivileges: ["pr-2"],
    },
    { id: "3", href: "/logout", label: "Logout", icon: "log-out",  isLocatedAtEnd: true },
  ]}
  privileges={["pr-1", "pr-2"]}
/>

With Header and Footer

<Sidebar items={menuItems} header={<h2>Header</h2>} footer={<h2>Footer</h2>} />

Features

• Responsive: Switches between desktop sidebar and mobile drawer (Sheet).
• Collapsible: Supports collapsed and expanded states on desktop.
• Customizable Logo: Change logo for collapsed/expanded states.
• Flexible Items: Supports top and end items ( isLocatedAtEnd).
• RTL Support: Works with Arabic/English layouts.
• Context-Driven: Uses MainContext for state management (open/collapsed).

Notes

• When collapsed, items show only icons with tooltips.
• When isMobile, the sidebar becomes a drawer (Sheet) with full-width items.
• End items ( isLocatedAtEnd=true) are rendered at the bottom (e.g., Logout button).
• Works seamlessly with RTL (useLanguage hook) → automatically switches side.