import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as SidebarStories from "./Sidebar.stories";

<Meta of={SidebarStories} />

# Sidebar

The Sidebar component is a navigation element that provides a collapsible and expandable menu structure for application navigation. It supports nested menu items, links, groups, and icons, making it ideal for organizing complex navigation hierarchies.

## Usage

<Canvas of={SidebarStories.MainMenu} source={ { code: `
import React from "react";
import { Sidebar, SidebarProvider } from "@webiny/admin-ui";
import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";

const SidebarExample = () => {
return (

<SidebarProvider>
  <Sidebar
    title={"Webiny"}
    icon={<Sidebar.Icon element={<img src="/logo.png" alt="Webiny" />} label={"Webiny"} />}
  >
    <Sidebar.Link
      text={"Headless CMS"}
      to={"/cms"}
      icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
    />
    <Sidebar.Item
      text={"Page Builder"}
      icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
    >
      <Sidebar.Group text={"Pages"} />
      <Sidebar.Link to={"/page-builder/pages"} text={"Pages"} />
      <Sidebar.Link to={"/page-builder/templates"} text={"Templates"} />
    </Sidebar.Item>
  </Sidebar>
</SidebarProvider>
); };

export default SidebarExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Sidebar/Sidebar.tsx',
'_blank'
);
},
}
]}
/>

```tsx
import React from "react";
import { Sidebar, SidebarProvider } from "@webiny/admin-ui";
import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";

const SidebarExample = () => {
  return (
    <SidebarProvider>
      <Sidebar
        title={"Webiny"}
        icon={<Sidebar.Icon element={<img src="/logo.png" alt="Webiny" />} label={"Webiny"} />}
      >
        <Sidebar.Link
          text={"Headless CMS"}
          to={"/cms"}
          icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
        />
        <Sidebar.Item
          text={"Page Builder"}
          icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
        >
          <Sidebar.Group text={"Pages"} />
          <Sidebar.Link to={"/page-builder/pages"} text={"Pages"} />
          <Sidebar.Link to={"/page-builder/templates"} text={"Templates"} />
        </Sidebar.Item>
      </Sidebar>
    </SidebarProvider>
  );
};

export default SidebarExample;
```

## Components

The Sidebar component is composed of several subcomponents that work together to create a complete navigation experience:

### Sidebar

The main container component that holds the entire sidebar structure.

```jsx
<Sidebar
  title="Application Title"
  icon={<Sidebar.Icon element={<Logo />} label="Logo" />}
  footer={<FooterContent />}
>
  {/* Menu items */}
</Sidebar>
```

### Sidebar.Item

Used to create menu items that can either be clickable or serve as containers for nested items.

```jsx
// Clickable item
<Sidebar.Item
    text="Settings"
    icon={<Sidebar.Item.Icon label="Settings" element={<SettingsIcon />} />}
    onClick={() => handleClick()}
/>

// Container for nested items
<Sidebar.Item
    text="Content"
    icon={<Sidebar.Item.Icon label="Content" element={<ContentIcon />} />}
>
    {/* Nested items */}
</Sidebar.Item>
```

### Sidebar.Link

Used to create menu items that link to different routes in the application.

```jsx
<Sidebar.Link
  text="Dashboard"
  to="/dashboard"
  icon={<Sidebar.Item.Icon label="Dashboard" element={<DashboardIcon />} />}
  active={currentPath === "/dashboard"}
/>
```

### Sidebar.Group

Used to create group labels for organizing related menu items.

```jsx
<Sidebar.Group text="Settings" />
<Sidebar.Link text="General" to="/settings/general" />
<Sidebar.Link text="Security" to="/settings/security" />
```

### Sidebar.Icon

Used to create icons for the sidebar header or menu items.

```jsx
<Sidebar.Icon element={<Logo />} label="Application Logo" />
```

## Features

### Collapsible/Expandable

The sidebar can be collapsed to save space or expanded to show full menu text. It automatically collapses when the mouse leaves and expands when the mouse enters.

### Pinnable

Users can pin the sidebar to keep it expanded permanently, which is useful for frequent navigation.

### Nested Navigation

Support for nested menu items allows for organizing complex navigation hierarchies.

### Active State

Menu items can be marked as active to indicate the current location in the application.

### Disabled State

Menu items can be disabled to indicate that they are not currently available.

### Footer Content

The sidebar supports footer content, which is useful for displaying additional information or actions at the bottom of the sidebar.