github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/Sidebar.stories.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import { ComponentMeta } from '@storybook/react';
     4  import Sidebar, {
     5    MenuItem,
     6    SidebarHeader,
     7    SidebarFooter,
     8    SidebarContent,
     9    SubMenu,
    10    Menu,
    11  } from '@ui/Sidebar';
    12  import { faClock } from '@fortawesome/free-solid-svg-icons/faClock';
    13  import { faBaby } from '@fortawesome/free-solid-svg-icons/faBaby';
    14  import Icon from '@ui/Icon';
    15  import '../webapp/sass/profile.scss';
    16  
    17  export default {
    18    title: 'Components/Sidebar',
    19    component: Sidebar,
    20  } as ComponentMeta<typeof Sidebar>;
    21  
    22  export const Default = () => {
    23    return (
    24      <Sidebar>
    25        <Menu iconShape="square">
    26          <MenuItem icon={<Icon icon={faClock} />}>Item</MenuItem>
    27          <MenuItem icon={<Icon icon={faBaby} />}>Item</MenuItem>
    28          <MenuItem icon={<Icon icon={faClock} />}>
    29            Item with very very very long name
    30          </MenuItem>
    31          <SubMenu icon={<Icon icon={faClock} />} title="Submenu">
    32            <MenuItem icon={<Icon icon={faClock} />}>Item</MenuItem>
    33            <MenuItem icon={<Icon icon={faBaby} />}>
    34              Item with very very very long name
    35            </MenuItem>
    36          </SubMenu>
    37        </Menu>
    38      </Sidebar>
    39    );
    40  };
    41  
    42  export const SidebarWithHeaderAndFooter = () => {
    43    return (
    44      <Sidebar>
    45        <SidebarHeader>Header</SidebarHeader>
    46        <SidebarContent />
    47        <SidebarFooter>
    48          <Menu>
    49            <MenuItem icon={<Icon icon={faClock} />}>Item Footer 1</MenuItem>
    50            <MenuItem icon={<Icon icon={faClock} />}>Item Footer 2</MenuItem>
    51            <MenuItem icon={<Icon icon={faClock} />}>Item Footer 3</MenuItem>
    52          </Menu>
    53        </SidebarFooter>
    54      </Sidebar>
    55    );
    56  };