@eureca/eureca-ui/src/components/Drawer/stories/drawer.stories.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import { withKnobs } from '@storybook/addon-knobs';
import { Hidden } from '@material-ui/core';

import { useWindowSize } from '../../../hooks/useWindowSizeSSR';

import Logo from '../../../assets/images/logo-small.svg';

import { DrawerMenu } from '../';
import AdminList from '../preset-types/admin';

export default { title: 'Originals/Drawer', decorators: [withKnobs], includeStories: [] };

export function BasicDrawer() {
  const [isOpen, setIsOpen] = useState(false);

  const windowSize = useWindowSize();

  const current = 'opportunities.edit';
  const user = {
    id: 3,
    name: 'Usuário Eureca',
    avatar: Logo,
  };

  return (
    <div style={{ display: 'flex' }}>
      <DrawerMenu
        list={AdminList}
        isOpen={isOpen}
        current={current}
        user={user}
        onClickItem={item => console.log('Item Clicked: ', item)}
        onClose={() => setIsOpen(!isOpen)}
        onLogout={() => console.log('Logout Clicked')}
        onClickUser={user => console.log('User Clicked', user)}
        linkComponent="div"
        windowSize={windowSize}
      />
      <Hidden smUp>
        <div>
          <button onClick={() => setIsOpen(!isOpen)}>Open Mobile Menu</button>
        </div>
      </Hidden>
    </div>
  );
}