Sidebar Component

A responsive sidebar component with collapsible functionality built with React and Material-UI.

Features

• Responsive design that adapts to mobile and desktop
• Collapsible sidebar with smooth animations
• Customizable navigation links with icons
• Optional logo and organization name display
• Built with TypeScript for better type safety

Installation

npm install @my-app/sidebar-component

Dependencies

This component requires the following peer dependencies:

• React 18+
• React DOM 18+
• React Router DOM 6+
• Material-UI 5+
• Material-UI Icons 5+

⚠️ Material UI Dependency Required

This component uses Material UI components and icons. Your project must have both @mui/material and @mui/icons-material installed as dependencies.

If you do not install Material UI, your app will crash with errors like:

Cannot find module '@mui/material'
Cannot find module '@mui/icons-material'

Install Material UI in your project:

npm install @mui/material @mui/icons-material

If your project does not use Material UI and you do not want to add it, this Sidebar component will not work for you.

Usage

import React from 'react';
import { Sidebar } from '@my-app/sidebar-component';
import DashboardIcon from '@mui/icons-material/Dashboard';
import SettingsIcon from '@mui/icons-material/Settings';

const App = () => {
  const links = [
    {
      label: 'Dashboard',
      link: '/dashboard',
      icon: DashboardIcon
    },
    {
      label: 'Settings',
      link: '/settings',
      icon: SettingsIcon
    }
  ];

  return (
    <Sidebar 
      links={links}
      logo="/path/to/logo.png"
      orgName="My Organization"
    />
  );
};

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | links | SidebarLink[] | Yes | Array of navigation links | | logo | string | No | URL to the logo image | | orgName | string | No | Organization name to display at bottom |

SidebarLink Interface

interface SidebarLink {
  label: string;        // Display text for the link
  link: string;         // Route path
  icon: React.ComponentType<any>; // Material-UI icon component
}

Styling

The component uses Tailwind CSS classes for styling. Make sure your project has Tailwind CSS configured.

License

MIT