### Install Dependencies and Run Development Scripts

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/CONTRIBUTING.md

Install project dependencies and run development scripts like starting the library in watch mode, running Storybook, or executing tests. These commands are essential for local development and testing.

```bash
yarn install      # install dependencies
yarn start        # build the library in watch mode (tsup)
yarn storybook    # run Storybook for interactive development
yarn test         # run the test suite (vitest)
yarn lint         # lint
yarn typecheck    # type-check
yarn build        # production build
yarn size         # check the bundle size budget
```

--------------------------------

### Install react-pro-sidebar

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/README.md

Install the library using npm or yarn. Ensure you have React and react-dom versions 18 or higher.

```bash
npm install react-pro-sidebar
# or
yarn add react-pro-sidebar
```

--------------------------------

### Basic Sidebar Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/README.md

A simple implementation of a sidebar with a menu and a submenu. This is a good starting point for integrating the sidebar into your application.

```tsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

export function App() {
  return (
    <Sidebar>
      <Menu>
        <MenuItem>Dashboard</MenuItem>
        <SubMenu label="Reports">
          <MenuItem>Sales</MenuItem>
          <MenuItem>Inventory</MenuItem>
        </SubMenu>
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### Install and Develop react-pro-sidebar Docs

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/README.md

Build the library and run the documentation development server.

```bash
# 1. Build the library so file:.. resolves to a populated dist/
cd ..
yarn install
yarn build

# 2. Run the docs dev server
cd website
yarn install
yarn dev
```

--------------------------------

### Complete Sidebar Layout Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/00-START-HERE.md

This example shows a full sidebar implementation with collapse/expand functionality and basic routing integration. It uses `useState` for managing sidebar state and `useLocation` for active menu item highlighting.

```tsx
import { useState } from 'react';
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import { useLocation } from 'react-router-dom';

export function Layout() {
  const [collapsed, setCollapsed] = useState(false);
  const [toggled, setToggled] = useState(false);
  const { pathname } = useLocation();

  return (
    <div style={{ display: 'flex' }}>
      <Sidebar
        collapsed={collapsed}
        toggled={toggled}
        onBackdropClick={() => setToggled(false)}
        breakPoint="md"
      >
        <Menu
          menuItemStyles={{
            button: ({ active }) => ({
              backgroundColor: active ? '#e3f2fd' : 'transparent',
              color: active ? '#2196f3' : '#333',
              '&:hover': { backgroundColor: '#f5f5f5' },
            }),
          }}
        >
          <button onClick={() => setCollapsed(!collapsed)}>
            {collapsed ? 'Expand' : 'Collapse'}
          </button>
          
          <MenuItem active={pathname === '/dashboard'}>
            Dashboard
          </MenuItem>
          
          <SubMenu label="Reports">
            <MenuItem active={pathname === '/reports/sales'}>
              Sales
            </MenuItem>
            <MenuItem active={pathname === '/reports/inventory'}>
              Inventory
            </MenuItem>
          </SubMenu>
        </Menu>
      </Sidebar>

      <main style={{ flex: 1 }}>
        {/* Your content here */}
      </main>
    </div>
  );
}
```

--------------------------------

### Controlled Open State Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sub-menu.mdx

Example demonstrating how to control the open state of a SubMenu using the `open` and `onOpenChange` props.

```APIDOC
## Controlled Open State

### Description
This example shows how to manage the open/closed state of a `SubMenu` component programmatically using the `open` prop and handling state changes with `onOpenChange`.

### Code
```jsx
import React, { useState } from 'react';

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <Menu>
      <SubMenu 
        label="Charts"
        open={open}
        onOpenChange={setOpen}
      >
        <MenuItem>Pie</MenuItem>
        <MenuItem>Line</MenuItem>
      </SubMenu>
    </Menu>
  );
}
```
```

--------------------------------

### Install react-pro-sidebar with npm

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/README.md

Use this command to add the library to your project when using npm.

```bash
npm install react-pro-sidebar
```

--------------------------------

### Install react-pro-sidebar with Yarn

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/README.md

Use this command to add the library to your project when using Yarn.

```bash
yarn add react-pro-sidebar
```

--------------------------------

### Basic Sidebar Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/README.md

A simple example demonstrating the basic structure of a sidebar with menu items and submenus.

```jsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem> Pie charts </MenuItem>
      <MenuItem> Line charts </MenuItem>
    </SubMenu>
    <MenuItem> Documentation </MenuItem>
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>
```

--------------------------------

### Install react-pro-sidebar with bun

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/installation.mdx

Use bun to add the react-pro-sidebar package to your project dependencies.

```bash
bun add react-pro-sidebar
```

--------------------------------

### Basic Sidebar Implementation

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/index.mdx

A basic example of how to implement a sidebar with menu items using React Pro Sidebar components.

```jsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

function App() {
  return (
    <Sidebar>
      <Menu>
        <MenuItem> Dashboard </MenuItem>
        <MenuItem> Calendar </MenuItem>
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### Accordion SubMenu Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sub-menu.mdx

Example of using the `accordion` prop to ensure only one direct child SubMenu is open at a time.

```APIDOC
## Accordion SubMenu

### Description
This example utilizes the `accordion` prop on a parent `SubMenu` to restrict the open state so that only one of its direct child `SubMenu` components can be expanded simultaneously.

### Code
```jsx
<SubMenu label="Components" accordion>
  <SubMenu label="Forms">
    <MenuItem>Input</MenuItem>
  </SubMenu>
  <SubMenu label="Layout">
    <MenuItem>Grid</MenuItem>
  </SubMenu>
  <SubMenu label="Display">
    <MenuItem>Card</MenuItem>
  </SubMenu>
</SubMenu>
```
```

--------------------------------

### Sidebar Basic Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

A basic example of how to use the Sidebar component with Menu and MenuItem.

```APIDOC
## Sidebar Basic Usage

### Description
This snippet shows the fundamental structure for using the `Sidebar` component along with `Menu` and `MenuItem`.

### Code Example
```jsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

<Sidebar collapsed={collapsed} toggled={toggled} onBackdropClick={() => setToggled(false)}>
  <Menu>
    <MenuItem>Dashboard</MenuItem>
  </Menu>
</Sidebar>;
```
```

--------------------------------

### Example of Resolving Menu Item Styles

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/hooks-and-utilities.md

Illustrates calling the `resolveElementStyles` function with style parameters to get the appropriate CSS object for a menu button.

```typescript
const styleParams = { level: 0, disabled: false, active: true, isSubmenu: false };
const buttonStyles = resolveElementStyles(menuItemStyles, 'button', styleParams);
// If menuItemStyles.button is a function, it's called with styleParams
// If it's a static object, it's returned as-is
```

--------------------------------

### Menu Item with Icons

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-item-component.md

Shows how to include icons alongside menu item text using the 'icon' prop. This enhances visual clarity and user experience. Ensure you have react-icons installed for this example.

```tsx
import { MenuItem } from 'react-pro-sidebar';
import { FiHome, FiSettings, FiLogOut } from 'react-icons/fi';

<Menu>
  <MenuItem icon={<FiHome />}>Dashboard</MenuItem>
  <MenuItem icon={<FiSettings />}>Settings</MenuItem>
  <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
</Menu>
```

--------------------------------

### MenuItem Component Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/menu-item.mdx

Basic example of how to use the MenuItem component within a Sidebar and Menu structure.

```APIDOC
## MenuItem Component Usage

### Description

This snippet demonstrates the fundamental structure for using the `MenuItem` component within the `react-pro-sidebar` library. It shows how to import and nest `MenuItem` inside `Menu` and `Sidebar` components, including an example of an active item with an icon.

### Code Example

```jsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <MenuItem icon={<DashboardIcon />} active>
      Dashboard
    </MenuItem>
  </Menu>
</Sidebar>;
```
```

--------------------------------

### Example Usage of Menu Classes

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/hooks-and-utilities.md

Shows how to apply menu class names for custom styling in Emotion CSS or within CSS selectors.

```tsx
// In Emotion CSS
menuItemStyles={{
  button: {
    [`&.${menuClasses.active}`]: {
      backgroundColor: '#e3f2fd',
    },
  },
}}

// In selectors
.{{menuClasses.active}} { color: #2196f3; }
```

--------------------------------

### Install react-pro-sidebar with pnpm

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/installation.mdx

Use pnpm to add the react-pro-sidebar package to your project dependencies.

```bash
pnpm add react-pro-sidebar
```

--------------------------------

### Example Usage of Sidebar Classes

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/hooks-and-utilities.md

Demonstrates how to use sidebar class names for custom styling with Emotion CSS or for setting test IDs.

```tsx
// In Emotion CSS
rootStyles={{
  [".${sidebarClasses.collapsed}"]:.{
    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
  },
}}

// In test IDs
data-testid={`${sidebarClasses.root}-test-id`}
```

--------------------------------

### Basic Menu Structure

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-component.md

Demonstrates the fundamental structure of a Sidebar with a Menu containing MenuItem and SubMenu components. This is the most basic setup for navigation.

```tsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

export function Dashboard() {
  return (
    <Sidebar>
      <Menu>
        <MenuItem>Dashboard</MenuItem>
        <SubMenu label="Reports">
          <MenuItem>Monthly</MenuItem>
          <MenuItem>Quarterly</MenuItem>
        </SubMenu>
        <MenuItem>Settings</MenuItem>
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### Utility Class Usage Examples

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/types.md

Demonstrates how to use the exported utility class names for CSS targeting and assigning test IDs.

```typescript
// CSS targeting
[`.${sidebarClasses.root}`]: { boxShadow: '...' }
```

```typescript
// Test ID
data-testid={`${menuClasses.button}-test-id`}
```

--------------------------------

### SubMenu Component Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sub-menu.mdx

Basic example of using the SubMenu component within a Menu, including a label and an icon.

```APIDOC
## SubMenu Component Usage

### Description
This example demonstrates the basic structure of a `SubMenu` component nested within a `Menu`.

### Code
```jsx
<Menu>
  <SubMenu label="Charts" icon={<ChartIcon />} defaultOpen>
    <MenuItem>Pie</MenuItem>
    <MenuItem>Line</MenuItem>
  </SubMenu>
</Menu>
```
```

--------------------------------

### Nested SubMenus Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/submenu-component.md

Demonstrates how to create deeply nested SubMenus to build complex navigation structures. Each SubMenu can contain other SubMenus or MenuItems.

```tsx
<Menu>
  <SubMenu label="Products">
    <SubMenu label="Electronics">
      <MenuItem>Laptops</MenuItem>
      <MenuItem>Phones</MenuItem>
    </SubMenu>
    <SubMenu label="Furniture">
      <MenuItem>Chairs</MenuItem>
      <MenuItem>Desks</MenuItem>
    </SubMenu>
  </SubMenu>
</Menu>
```

--------------------------------

### Setting Custom Sidebar Width

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

Example of how to set a custom width for the expanded sidebar using the `width` prop.

```jsx
<Sidebar width="320px">…</Sidebar>
```

--------------------------------

### Basic Sidebar with Menu

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/sidebar-component.md

A simple sidebar implementation with a menu containing dashboard, profile, and settings items. This is a foundational example for integrating the Sidebar component.

```tsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

export function App() {
  return (
    <Sidebar>
      <Menu>
        <MenuItem>Dashboard</MenuItem>
        <MenuItem>Profile</MenuItem>
        <MenuItem>Settings</MenuItem>
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### Sidebar with React Router Integration

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/README.md

Example showing how to integrate react-pro-sidebar with React Router using the `component` prop and NavLink for active styling.

```jsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { NavLink } from 'react-router-dom';

<Sidebar>
  <Menu
    menuItemStyles={{
      button: {
        // NavLink adds the active class automatically,
        // so we can use it to style the active menu item
        [`&.active`]: {
          backgroundColor: '#13395e',
          color: '#b6c8d9',
        },
      },
    }}
  >
    <MenuItem component={<NavLink to="/documentation" />}> Documentation</MenuItem>
    <MenuItem component={<NavLink to="/calendar" />}> Calendar</MenuItem>
    <MenuItem component={<NavLink to="/e-commerce" />}> E-commerce</MenuItem>
  </Menu>
</Sidebar>
```

--------------------------------

### MenuItem with Root Styles

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/menu-item.mdx

Example of applying custom styles directly to the root `<li>` element of a MenuItem using the `rootStyles` prop.

```jsx
<MenuItem rootStyles={{ marginBottom: 4 }}>…</MenuItem>
```

--------------------------------

### Accordion Menu Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-component.md

Configures the Menu component to behave as an accordion, where only one SubMenu can be open at a time within the same nesting level. Use the `accordion` prop set to `true`.

```tsx
<Sidebar>
  <Menu accordion={true}>
    <SubMenu label="Products" defaultOpen={true}>
      <MenuItem>Electronics</MenuItem>
      <MenuItem>Furniture</MenuItem>
    </SubMenu>
    <SubMenu label="Orders">
      <MenuItem>Pending</MenuItem>
      <MenuItem>Completed</MenuItem>
    </SubMenu>
    {/* Only one can be open at a time */}
  </Menu>
</Sidebar>
```

--------------------------------

### Sidebar with Background Image and Custom Styles

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/sidebar-component.md

Configures a sidebar with a background image, custom dimensions, background color, and shadow styling. This example highlights customization options for visual appearance.

```tsx
<Sidebar
  width="280px"
  collapsedWidth="70px"
  backgroundColor="rgba(0, 0, 0, 0.5)"
  image="/sidebar-bg.jpg"
  rtl={false}
  rootStyles={{
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
  }}
>
  <Menu>
    {/* menu items */}
  </Menu>
</Sidebar>
```

--------------------------------

### Mobile-First Sidebar Layout

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/integration-guide.md

This example demonstrates a mobile-first layout where the sidebar is hidden by default on small screens and can be toggled open with a button. It automatically closes the sidebar when the mobile breakpoint is entered.

```tsx
import { useState, useCallback } from 'react';

export function MobileLayout() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const handleBreakPoint = useCallback((broken: boolean) => {
    // Auto-close sidebar when entering mobile breakpoint
    if (broken) setSidebarOpen(false);
  }, []);

  return (
    <div className="flex min-h-screen">
      <button
        onClick={() => setSidebarOpen(!sidebarOpen)}
        className="md:hidden fixed z-50 top-4 left-4"
      >
        ☰
      </button>

      <Sidebar
        breakPoint="md"
        toggled={sidebarOpen}
        onBackdropClick={() => setSidebarOpen(false)}
        onBreakPoint={handleBreakPoint}
        width="250px"
        collapsedWidth="70px"
      >
        <Menu closeOnClick={true}> 
          {/* Menu items close automatically on click in mobile */}
        </Menu>
      </Sidebar>

      <main className="flex-1 p-4">
        {/* Main content */}
      </main>
    </div>
  );
}
```

--------------------------------

### Setting Custom Breakpoint for Overlay Mode

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

Example of setting a custom pixel value for the `breakPoint` prop, which determines when the sidebar switches to overlay mode.

```jsx
<Sidebar breakPoint="450px">…</Sidebar>
```

--------------------------------

### Menu Popover Mode Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-component.md

Activates popover mode for top-level submenus, causing them to open as floating popups instead of sliding inline. This is useful for sidebars with a large number of items.

```tsx
<Menu popover={true}>
  <SubMenu label="Menu">
    {/* Opens as a floating popper, not inline */}
  </SubMenu>
</Menu>
```

--------------------------------

### Menu Item with Custom Styling

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-item-component.md

Provides an example of applying custom styles to MenuItem elements using the 'menuItemStyles' prop. This allows for fine-grained control over the appearance of buttons and icons based on their state (active, disabled).

```tsx
<Menu
  menuItemStyles={{
    button: ({ active, disabled }) => ({
      backgroundColor: active ? '#f0f0f0' : 'transparent',
      color: disabled ? '#999' : '#333',
      borderLeft: active ? '4px solid #2196f3' : 'none',
      paddingLeft: active ? '16px' : '20px',
    }),
    icon: {
      fontSize: '18px',
      marginRight: '12px',
    },
  }}
>
  <MenuItem icon={<HomeIcon />}>Home</MenuItem>
  <MenuItem icon={<AnalyticsIcon />} active={true}>
    Analytics
  </MenuItem>
</Menu>
```

--------------------------------

### Build react-pro-sidebar Docs

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/README.md

Build the static site for deployment.

```bash
yarn build      # outputs the static site to ./out
```

--------------------------------

### Testing Sidebar Accessibility with axe-core

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/accessibility.mdx

Integrate axe-core into your test suite to verify that your react-pro-sidebar implementation has no accessibility violations. This example demonstrates a basic test setup using vitest-axe.

```ts
import { axe } from 'vitest-axe';

test('sidebar has no axe violations', async () => {
  const { container } = render(<MySidebar />);
  expect(await axe(container)).toHaveNoViolations();
});
```

--------------------------------

### Netlify Build Configuration

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/README.md

Configure Netlify to build the project, ensuring the library is built before the documentation site.

```toml
[build]
  base    = "website"
  command = "cd .. && yarn install --frozen-lockfile && yarn build && cd website && yarn install --frozen-lockfile && yarn build"
  publish = "website/out"
```

--------------------------------

### Basic Sidebar Usage in React

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/installation.mdx

Demonstrates how to set up a basic sidebar layout with menu items and submenus using react-pro-sidebar components.

```jsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

export default function App() {
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <Sidebar>
        <Menu>
          <MenuItem> Dashboard </MenuItem>
          <SubMenu label="Charts">
            <MenuItem> Pie charts </MenuItem>
            <MenuItem> Line charts </MenuItem>
          </SubMenu>
          <MenuItem> Documentation </MenuItem>
          <MenuItem> Calendar </MenuItem>
        </Menu>
      </Sidebar>
      <main style={{ flex: 1, padding: 16 }}>Hello, world!</main>
    </div>
  );
}
```

--------------------------------

### Configuring Sidebar Responsiveness

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/00-START-HERE.md

Shows how to configure the Sidebar's responsive behavior using the `breakPoint` prop to control when it enters overlay mode. The `toggled` prop allows external control of the overlay, and `onBreakPoint` notifies of changes.

```tsx
<Sidebar
  breakPoint="md"
  toggled={isMobile}
  onBreakPoint={setBroken}
/>
```

--------------------------------

### Basic MenuItem Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/menu-item.mdx

Demonstrates the basic structure of a MenuItem within a Sidebar and Menu. It shows how to include an icon and mark an item as active.

```jsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <MenuItem icon={<DashboardIcon />} active>
      Dashboard
    </MenuItem>
  </Menu>
</Sidebar>;
```

--------------------------------

### MenuItem with Suffix

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/menu-item.mdx

Example of adding a suffix node to a MenuItem. This is commonly used for badges, counters, or keyboard shortcuts.

```jsx
<MenuItem suffix={<Badge>New</Badge>}>Calendar</MenuItem>
```

--------------------------------

### Directory Structure

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/00-START-HERE.md

This snippet shows the file structure of the react-pro-sidebar project. It helps users locate specific documentation files.

```bash
.
├── 00-START-HERE.md              ← You are here
├── INDEX.txt                     ← Documentation summary
├── README.md                     ← Master index & navigation
├── OVERVIEW.md                   ← Project overview
├── api-index.md                  ← Quick API reference
├── sidebar-component.md          ← Sidebar component reference
├── menu-component.md             ← Menu component reference
├── menu-item-component.md        ← MenuItem component reference
├── submenu-component.md          ← SubMenu component reference
├── types.md                      ← All type definitions
├── configuration.md              ← Configuration options
├── hooks-and-utilities.md        ← Internal details
├── state-management.md           ← State management patterns
└── integration-guide.md          ← Real-world examples
```

--------------------------------

### Pages Router Sidebar Component

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/examples/nextjs-integration.mdx

Implement a sidebar component for the Pages Router, using next/router to get the current pathname.

```tsx
// components/AppSidebar.tsx
import Link from 'next/link';
import { useRouter } from 'next/router';
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

export default function AppSidebar() {
  const { pathname } = useRouter();
  return (
    <Sidebar>
      <Menu>
        <MenuItem component={<Link href="/" />} active={pathname === '/'}>
          Home
        </MenuItem>
        <MenuItem component={<Link href="/blog" />} active={pathname === '/blog'}>
          Blog
        </MenuItem>
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### Mobile-First Responsive Sidebar Configuration

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/configuration.md

Configuration for a mobile-first responsive sidebar with a breakpoint, toggle state management, and backdrop click handling.

```tsx
<Sidebar
  width="280px"
  collapsedWidth="70px"
  breakPoint="md"
  toggled={toggledState}
  onBackdropClick={() => setToggledState(false)}
  onBreakPoint={(broken) => {
    if (broken) setToggledState(false);
  }}
>
  <Menu closeOnClick={true} popover={false}>
    {/* ... */}
  </Menu>
</Sidebar>

```

--------------------------------

### Basic Menu Structure

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/menu.mdx

Demonstrates the basic structure of a Sidebar with nested Menus, SubMenus, and MenuItems.

```jsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem>Pie</MenuItem>
      <MenuItem>Line</MenuItem>
    </SubMenu>
    <MenuItem>Documentation</MenuItem>
  </Menu>
</Sidebar>;
```

--------------------------------

### Create a Changeset for User-Facing Changes

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/CONTRIBUTING.md

Use this command to create a changeset file when making user-facing changes. This process prompts for the bump type (patch, minor, major) and a summary for the changelog entry. The generated changeset file should be committed with your Pull Request.

```bash
yarn changeset
```

--------------------------------

### Single-Open Navigation Menu Configuration

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/configuration.md

Configure a sidebar with a menu that only allows one sub-menu to be open at a time, with a default open sub-menu.

```tsx
<Sidebar>
  <Menu accordion={true}>
    <SubMenu label="Products" defaultOpen={true}>
      {/* ... */}
    </SubMenu>
    <SubMenu label="Settings">
      {/* ... */}
    </SubMenu>
  </Menu>
</Sidebar>

```

--------------------------------

### Disabled SubMenu Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/submenu-component.md

Disables interaction with a SubMenu and its children by setting the `disabled={true}` prop. This prevents clicks and highlights the SubMenu as inactive.

```tsx
<SubMenu label="Premium Features" disabled={true}>
  <MenuItem>Advanced Analytics</MenuItem>
  <MenuItem>Custom Reports</MenuItem>
</SubMenu>
```

--------------------------------

### Basic React Router Integration

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/integration-guide.md

Set up a basic navigation structure using react-pro-sidebar and react-router-dom's NavLink. Customize menu item styles based on active routes.

```tsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import { NavLink, useLocation } from 'react-router-dom';

export function Navigation() {
  const { pathname } = useLocation();

  return (
    <Sidebar>
      <Menu
        menuItemStyles={{
          button: ({ active }) => ({
            backgroundColor: active ? '#e3f2fd' : 'transparent',
            color: active ? '#2196f3' : '#333',
            '&:hover': { backgroundColor: '#f5f5f5' },
          }),
        }}
      >
        <MenuItem
          component={<NavLink to="/dashboard" />}
          active={pathname === '/dashboard'}
        >
          Dashboard
        </MenuItem>
        <SubMenu label="Analytics">
          <MenuItem
            component={<NavLink to="/analytics/traffic" />}
            active={pathname === '/analytics/traffic'}
          >
            Traffic
          </MenuItem>
          <MenuItem
            component={<NavLink to="/analytics/conversion" />}
            active={pathname === '/analytics/conversion'}
          >
            Conversions
          </MenuItem>
        </SubMenu>
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### Basic Sidebar Structure

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

Demonstrates the basic structure of a Sidebar component with a Menu and MenuItem. It shows how to control the collapsed and toggled states and handle backdrop clicks.

```jsx
import {
  Sidebar,
  Menu,
  MenuItem
} from 'react-pro-sidebar';

<Sidebar collapsed={collapsed} toggled={toggled} onBackdropClick={() => setToggled(false)}>
  <Menu>
    <MenuItem>Dashboard</MenuItem>
  </Menu>
</Sidebar>;
```

--------------------------------

### Configuring RTL Layout

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

Demonstrates how to enable Right-to-Left (RTL) layout for the sidebar by passing the `rtl` prop. The surrounding div's direction style is also adjusted.

```jsx
<div style={{ direction: rtl ? 'rtl' : 'ltr' }}>
  <Sidebar rtl={rtl}>…</Sidebar>
</div>
```

--------------------------------

### Redux State Management for Sidebar

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/state-management.md

Manage sidebar state (collapsed and toggled) using Redux. This example assumes a 'sidebarSlice' with 'toggleSidebar' and 'setSidebarCollapsed' actions.

```tsx
import { useDispatch, useSelector } from 'react-redux';
import { toggleSidebar, setSidebarCollapsed } from './store/sidebarSlice';

export function App() {
  const dispatch = useDispatch();
  const { collapsed, toggled } = useSelector(state => state.sidebar);

  return (
    <Sidebar
      collapsed={collapsed}
      toggled={toggled}
      onBackdropClick={() => dispatch(toggleSidebar())}
    >
      {/* ... */}
    </Sidebar>
  );
}
```

--------------------------------

### Manage Active State with useLocation

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-item-component.md

Use the `active` prop to visually indicate the current route. This example integrates with `react-router-dom`'s `useLocation` hook to determine the active state.

```tsx
import { useLocation } from 'react-router-dom';

function NavItem({ path, label, icon }) {
  const { pathname } = useLocation();
  const isActive = pathname === path;
  
  return (
    <MenuItem active={isActive} icon={icon}>
      {label}
    </MenuItem>
  );
}
```

--------------------------------

### v1: Using ProSidebarProvider and useProSidebar hook

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/MIGRATION.md

Before migrating to v2, v1 used ProSidebarProvider to wrap the application and useProSidebar hook to control sidebar state.

```jsx
import { ProSidebarProvider, useProSidebar, Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

// 1. wrap the app
function Root() {
  return (
    <ProSidebarProvider>
      <App />
    </ProSidebarProvider>
  );
}

// 2. control via the hook
function App() {
  const { collapseSidebar, toggleSidebar, collapsed, broken } = useProSidebar();

  return (
    <>
      <Sidebar>
        <Menu>
          <MenuItem>Documentation</MenuItem>
        </Menu>
      </Sidebar>
      <button onClick={() => collapseSidebar()}>Collapse</button>
      <button onClick={() => toggleSidebar()}>Toggle</button>
    </>
  );
}
```

--------------------------------

### Customizing Menu Item Styles

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/00-START-HERE.md

Demonstrates how to apply dynamic styles to menu items based on their active state and nesting level using the `menuItemStyles` prop. This allows for visual feedback and hierarchy indication.

```tsx
<Menu menuItemStyles={{
  button: ({ active, level }) => ({
    backgroundColor: active ? '#e3f2fd' : 'transparent',
    paddingLeft: `${level * 20}px`,
  }),
}} />
```

--------------------------------

### Implement Search and Filter in Sidebar Menu

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/integration-guide.md

This example demonstrates how to add a search or filter functionality to the react-pro-sidebar menu. It filters menu items based on user input matching keywords.

```tsx
import { useState } from 'react';
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

const menuItems = [
  { id: 1, label: 'Dashboard', keywords: ['dashboard', 'home'] },
  { id: 2, label: 'Analytics', keywords: ['analytics', 'stats', 'report'] },
  { id: 3, label: 'Settings', keywords: ['settings', 'config', 'preferences'] },
];

export function FilterableMenu() {
  const [filter, setFilter] = useState('');

  const filtered = menuItems.filter((item) =>
    item.keywords.some((keyword) =>
      keyword.includes(filter.toLowerCase())
    )
  );

  return (
    <Sidebar>
      <div style={{ padding: '10px' }}>
        <input
          type="text"
          placeholder="Search menu..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        />
      </div>
      <Menu>
        {filtered.map((item) => (
          <MenuItem key={item.id}>{item.label}</MenuItem>
        ))}
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### SubMenu Open vs. DefaultOpen

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/state-management.md

Illustrates the difference between controlled and uncontrolled states for SubMenu. The `open` prop takes precedence if defined, ignoring `defaultOpen`.

```tsx
// Controlled: parent owns state
<SubMenu open={parentState} onOpenChange={setParentState}>

// Uncontrolled: SubMenu owns state
<SubMenu defaultOpen={true} onOpenChange={handleStateChange}>

// Mixed: controlled wins if open is defined
<SubMenu open={controlled} defaultOpen={uncontrolled} onOpenChange={...}>
// Only "open" is used; defaultOpen is ignored
```

--------------------------------

### Basic SubMenu Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/submenu-component.md

Demonstrates a simple SubMenu with a label and nested MenuItems. Import Sidebar, Menu, MenuItem, and SubMenu from 'react-pro-sidebar'.

```tsx
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Reports">
      <MenuItem>Monthly Report</MenuItem>
      <MenuItem>Quarterly Report</MenuItem>
    </SubMenu>
  </Menu>
</Sidebar>
```

--------------------------------

### SubMenu Active State from Route

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/submenu-component.md

Integrates with react-router-dom to set the active state of a SubMenu based on the current route. Uses `useLocation` to get the pathname and conditionally applies the 'active' prop.

```tsx
import { useLocation } from 'react-router-dom';

function NavSubMenu({ path, label, items }) {
  const { pathname } = useLocation();
  const isActive = items.some(item => pathname === item.path);

  return (
    <SubMenu label={label} active={isActive}>
      {items.map(item => (
        <MenuItem
          key={item.path}
          component={<NavLink to={item.path} />}
          active={pathname === item.path}
        >
          {item.label}
        </MenuItem>
      ))}
    </SubMenu>
  );
}
```

--------------------------------

### Menu Accordion Mode Example

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-component.md

Enables accordion mode for submenus, ensuring only one top-level submenu can be open at a time. Opening a new submenu automatically closes any previously open sibling.

```tsx
<Menu accordion={true}>
  <SubMenu label="Documents" defaultOpen={true}>
    <MenuItem>Invoices</MenuItem>
  </SubMenu>
  <SubMenu label="Reports">
    <MenuItem>Analytics</MenuItem>
  </SubMenu>
  {/* Only "Documents" starts open; opening "Reports" closes "Documents" */}
</Menu>
```

--------------------------------

### Conditional Styling with State Callbacks

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/examples/theme-customization.mdx

Applies styles to menu item buttons based on their state (level, active, disabled). This example demonstrates how to conditionally style top-level menu items differently from sub-menu items.

```jsx
<Menu
  menuItemStyles={{
    button: ({ level, active, disabled }) => {
      if (level === 0) {
        return {
          color: disabled ? '#9fb6cf' : '#0d3b66',
          backgroundColor: active ? '#cfe7ff' : undefined,
        };
      }
      // Level > 0 styling
      return { color: '#3f7cac' };
    },
  }}
>
  …
</Menu>
```

--------------------------------

### Basic Menu Item Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-item-component.md

Demonstrates the fundamental usage of the MenuItem component within a Sidebar and Menu structure. This is the most basic way to render a navigation item.

```tsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <MenuItem>Dashboard</MenuItem>
    <MenuItem>Profile</MenuItem>
  </Menu>
</Sidebar>
```

--------------------------------

### Responsive Design Breakpoint Configuration

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/configuration.md

Configure the sidebar's responsive behavior using the `breakPoint` prop. This prop controls when the sidebar switches to responsive/overlay mode. You can use predefined breakpoints or set a custom pixel value.

```tsx
// Predefined breakpoints
<Sidebar breakPoint="md">  {/* 768px */}
<Sidebar breakPoint="lg">  {/* 992px */}

// Custom breakpoint
<Sidebar breakPoint="450px">

// Always responsive
<Sidebar breakPoint="all">
```

--------------------------------

### Customizing Sidebar Root Styles

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

Illustrates how to override the default styles of the sidebar's root element using the `rootStyles` prop with Emotion's `CSSObject`. This example targets the container class to change background and text color.

```jsx
import { Sidebar, sidebarClasses } from 'react-pro-sidebar';

<Sidebar
  rootStyles={{
    [`.${sidebarClasses.container}`]: {
      backgroundColor: '#0b2948',
      color: '#fff',
    },
  }}
>
  …
</Sidebar>;
```

--------------------------------

### Targeting Deep Nodes with rootStyles and Class Registries

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/examples/theme-customization.mdx

Overrides styles for specific internal elements of the sidebar and menu components using `rootStyles` in conjunction with `sidebarClasses` and `menuClasses`. This example adds a box shadow to the sidebar container and adjusts the padding of the sub-menu content.

```jsx
import { Sidebar, sidebarClasses, menuClasses } from 'react-pro-sidebar';

<Sidebar
  rootStyles={{
    [`.${sidebarClasses.container}`]: { boxShadow: '2px 0 8px rgba(0,0,0,0.04)' },
    [`.${menuClasses.subMenuContent}`]: { paddingLeft: 24 },
  }}
>
  …
</Sidebar>
```

--------------------------------

### Tracking Breakpoint Changes

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

Demonstrates how to use the `onBreakPoint` prop to track changes in the sidebar's broken (overlay) state, useful for conditional logic or UI updates.

```jsx
<Sidebar onBreakPoint={(broken) => setBroken(broken)}>…</Sidebar>
```

--------------------------------

### Applying Background Image to Sidebar

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sidebar.mdx

Shows how to set a background image for the sidebar and use a transparent background color to ensure the image is visible.

```jsx
<Sidebar
  image="/img/sidebar-bg.jpg"
  backgroundColor="rgba(255,255,255,0.85)"
>
  …
</Sidebar>
```

--------------------------------

### Basic SubMenu Usage

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/website/pages/docs/components/sub-menu.mdx

Demonstrates the basic structure of a SubMenu within a Menu, including a label and an icon. Child MenuItems are nested inside.

```jsx
<Menu>
  <SubMenu label="Charts" icon={<ChartIcon />} defaultOpen>
    <MenuItem>Pie</MenuItem>
    <MenuItem>Line</MenuItem>
  </SubMenu>
</Menu>
```

--------------------------------

### Layout with Collapsible Sidebar and Main Content

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/state-management.md

Implements a responsive layout with a collapsible sidebar and main content area. Use `collapsed` and `toggled` props for sidebar control and `breakPoint` for responsive behavior. The main content area should handle overflow.

```tsx
export function Layout() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [sidebarToggled, setSidebarToggled] = useState(false);

  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <Sidebar
        collapsed={sidebarCollapsed}
        toggled={sidebarToggled}
        onBackdropClick={() => setSidebarToggled(false)}
        breakPoint="lg"
      >
        <Menu>
          <button onClick={() => setSidebarCollapsed(!sidebarCollapsed)}>
            {sidebarCollapsed ? 'Expand' : 'Collapse'}
          </button>
          <MenuItem>Dashboard</MenuItem>
          <MenuItem>Settings</MenuItem>
        </Menu>
      </Sidebar>

      <main style={{ flex: 1, overflow: 'auto' }}>
        <header>
          <button onClick={() => setSidebarToggled(!sidebarToggled)}>
            Menu
          </button>
        </header>
        <Outlet />
      </main>
    </div>
  );
}
```

--------------------------------

### Responsive Sidebar with Toggle

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/sidebar-component.md

Demonstrates a responsive sidebar that can be toggled open or closed using a button. It utilizes the `breakPoint` prop for responsive behavior and `onBackdropClick` to close the sidebar when the backdrop is clicked.

```tsx
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { useState } from 'react';

export function App() {
  const [toggled, setToggled] = useState(false);

  return (
    <div>
      <button onClick={() => setToggled(!toggled)}>Toggle Sidebar</button>
      <Sidebar
        toggled={toggled}
        onBackdropClick={() => setToggled(false)}
        breakPoint="md"
      >
        <Menu>
          <MenuItem>Dashboard</MenuItem>
          <MenuItem>Analytics</MenuItem>
        </Menu>
      </Sidebar>
    </div>
  );
}
```

--------------------------------

### Hybrid Sidebar State Management (Recommended)

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/state-management.md

A hybrid approach where the sidebar's collapsed and toggled states are controlled, but SubMenu states are uncontrolled. This simplifies state management while maintaining predictable sidebar behavior.

```tsx
export function App() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [sidebarToggled, setSidebarToggled] = useState(false);

  return (
    <Sidebar
      collapsed={sidebarCollapsed}
      toggled={sidebarToggled}
      onBackdropClick={() => setSidebarToggled(false)}
      breakPoint="md"
    >
      <Menu>
        <SubMenu label="Reports" defaultOpen={true}>
          <MenuItem>Sales</MenuItem>
        </SubMenu>
        <SubMenu label="Analytics">
          <MenuItem>Traffic</MenuItem>
        </SubMenu>
      </Menu>
    </Sidebar>
  );
}
```

--------------------------------

### Menu with Icons and Styling

Source: https://github.com/azouaoui-med/react-pro-sidebar/blob/master/_autodocs/menu-component.md

Shows how to apply custom styles to menu items and include icons. The `menuItemStyles` prop accepts an object to define styles for different parts of the menu item, including hover effects.

```tsx
<Sidebar>
  <Menu
    menuItemStyles={{
      button: {
        '&:hover': { backgroundColor: '#f0f0f0' },
      },
      icon: { marginRight: '15px', fontSize: '18px' },
      label: { fontSize: '14px' },
    }}>
    <MenuItem icon={<HomeIcon />}>Home</MenuItem>
    <SubMenu label="Analytics" icon={<ChartIcon />}>
      <MenuItem>Traffic</MenuItem>
      <MenuItem>Conversions</MenuItem>
    </SubMenu>
  </Menu>
</Sidebar>
```