Yusr Sidebar

YusrSidebar is a generic component that you can use on your React app as a compound component. It arranges sidebar content into main and secondary items and gives you automatically API requests when navigating between sidebar items. The request is FULLY DYNAMIC where it respects the current user credentials and provides the content of the sidebar and request endpoints depending on it.

Preview

How to use it ?

YusrSideBar uses a Compound Component pattern. This means you wrap your sidebar sections (Header, Content, Footer) inside the main <YusrSideBar> parent component. The parent acts as a context provider, sharing configuration (like logos, navigation items, and link behaviors) with its children.

"use client";
import {
  SidebarProvider,
  YusrSidBarProps,
  YusrSideBar,
} from "@yusr_systems/ui";
import {
  Percent,
  LayoutDashboardIcon,
  SettingsIcon,
  UsersIcon,
} from "lucide-react";
import Link from "next/link";

const mockYusrSidBarProps: YusrSidBarProps = {
  logos: {
    logoFullDark: "/yusrBusLogoRTL_Dark.png",
    logoFullLight: "/yusrBusLogoRTL_Light.png",
    logoOnlyDark: "/yusrLogoOnly_Dark.png",
    logoOnlyLight: "/yusrLogoOnly_Light.png",
  },
  navMain: [
    {
      title: "لوحة التحكم",
      url: "",
      icon: <LayoutDashboardIcon />,
      hasAuth: true,
    },
    {
      title: "الحسابات",
      url: "",
      icon: <UsersIcon />,
      hasAuth: true,
    },
    {
      title: "الضرائب",
      url: "",
      icon: <Percent />,
      hasAuth: true,
    },
  ],
  navSecondary: [
    {
      title: "الإعدادات",
      url: "",
      icon: <SettingsIcon />,
    },
  ],

  LinkComponent: Link,
};

export default function Layout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex">
      <div className="bg-white text-black min-w-60 min-h-screen flex items-center justify-center">
        <YusrSideBar {...mockYusrSidBarProps}>
          <YusrSideBar.Header />
          <YusrSideBar.Content LogoutHandler={async () => {}} />
          <YusrSideBar.Footer />
        </YusrSideBar>
      </div>
      <SidebarProvider>
        <div className="flex-1 min-h-screen p-4">{children}</div>
      </SidebarProvider>
    </div>
  );
}

Component API

<YusrSideBar /> (Parent)

The parent component initializes the context and the sidebar wrapper. It accepts all standard HTML attributes for a sidebar, plus the following specific props:

Prop	Type	Default	Description
LinkComponent	React.ElementType	"a"	The component used for navigation links. Pass Link from Next.js or React Router to enable client-side routing.
logos	{   logoFullDark: string;   logoFullLight: string;   logoOnlyDark: string;   logoOnlyLight: string; }	undefined	Configuration for the sidebar logos for both light and dark modes, and full vs collapsed states.
displayCompany	{   name: string;   logo: string; }	{ name: "Yusr UI", logo: "/yusr-logo.png" }	The company name and logo to display in the header.
navMain	{   title: string;   url: string;   icon: JSX.Element;   hasAuth: boolean; }[]	undefined	Array of objects representing the primary navigation links.
navSecondary	{   title: string;   url: string;   icon: JSX.Element; }[]	undefined	Array of objects representing the secondary navigation links (usually placed at the bottom).
children	ReactNode	undefined	The compound sub-components (Header, Content, Footer).

Note: By default, the sidebar is configured with collapsible="icon" and side="right". You can override these by passing them directly to the component.

---

<YusrSideBar.Header />

Renders the top section of the sidebar. It automatically consumes the logos and displayCompany props from the parent context.

Props: This component does not require any direct props.

---

<YusrSideBar.Content />

Renders the middle section of the sidebar, including the main navigation menu and the secondary navigation menu.

Prop	Type	Default	Description
LogoutHandler	() => Promise<void>	undefined	An optional async function triggered when the user clicks the logout button in the secondary menu.

---

<YusrSideBar.Footer />

Renders the bottom section of the sidebar, typically used to display the currently logged-in user's profile information.

Prop	Type	Default	Description
loggedInUser	any	undefined	An object containing the current user's data (e.g., name, email, avatar).