SideBar

Installation

npx gbs-add-block@latest -a SideBar

The SideBarWrapper component is a React wrapper around a reusable Sidebar component. It configures and provides icons and menu data dynamically, making it easy to manage navigation items for applications like admin panels, dashboards, or SaaS UIs.

Features

• Dynamically provides icons to the Sidebar via an iconMap.

• Uses initialMenuData to structure sections and items.

• Clean integration with SVG icons.

• Easy to extend and customize.

Props

Prop	Type	Description
menuData	MenuData	Menu content with sections and items
iconMap	Record<string, Component>	Mapping of menu item keys to icons

Icon Mapping (iconMap)

Each entry in the sidebar is represented by a key (e.g., dashboard, payment) which is mapped to a corresponding icon React component.

const DashboardIcon: IconComponent = () => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" />
    </svg>
  );
  const PaymentIcon: IconComponent = () => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fillRule="evenodd"
        d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
        clipRule="evenodd"
      />
    </svg>
  );

const iconMap: Record<string, IconComponent> = {
  dashboard: DashboardIcon,
  payment: PaymentIcon,
  ...
};

Imports

import { Sidebar } from "@/component-lib/sidebar";
import { IconComponent } from "@/component-lib/sidebar/type";
import { initialMenuData } from "@/utils/sidebar";
import React from "react";

export default function SideBarWrapper() {
  return <Sidebar menuData={initialMenuData} iconMap={iconMap} />;
}

Menu Data (initialMenuData)

The initialMenuData defines:

• Logo: name and image URL

• Sections: groupings of sidebar links

Sample structure MenuItem:

import { MenuData } from "@/component-lib/sidebar/type";
import SideBarButton from "@/components/ui/SideBarButton";

// Sample menu data - this can be passed as a prop
export const initialMenuData: MenuData = {
  logo: {
    name: "Sequence",
    logoUrl: "/file.svg", // Replace with your actual logo path
  },
  sections: [
    {
      title: "GENERAL",
      items: [
        {
          id: 1,
          name: "Dashboard",
          icon: "dashboard",
          path: "/dashboard",
          active: true,
        },
        { id: 2, name: "Payment", icon: "payment", path: "/payment" },
        {
          id: 3,
          name: "Transaction",
          icon: "transaction",
          path: "/transaction",
        },
        {
          id: 4,
          name: "Cards",
          icon: "cards",
          path: "/cards",
          expandable: true,
          expanded: false,
        },
      ],
    },
    {
      title: "SUPPORT",
      items: [
        { id: 5, name: "Capital", icon: "capital", path: "/capital" },
        { id: 6, name: "Vaults", icon: "vaults", path: "/vaults" },
        { id: 7, name: "Reports", icon: "reports", path: "/reports" },
        { id: 8, name: "Earn", icon: "earn", path: "/earn", badge: "150" },
        {
          id: 890,
          name: "Custoime",
          icon: "earn",
          type: "custom",
          component: SideBarButton,
        }, // Renders Custom Components
      ],
    },
  ],
  footer: [
    { id: 9, name: "Settings", icon: "settings", path: "/settings" },
    { id: 10, name: "Help", icon: "help", path: "/help" },
    {
      type: "custom",
      id: 11,
      name: "Dark Mode",
      icon: "pro",
      toggle: false,
      active: false,
      component: SideBarButton, // Renders Custom Components
    },
  ],
  profile: {
    name: "Young Alaska",
    email: "[e-mail]",
    avatarUrl: "/avatar.jpg", // Replace with your actual avatar path
  },
};