import { Accessibility, Gavel, Menu, NotificationsActive, Person, Settings, Today } from '@material-ui/icons'; import { Spacer } from '@brightlayer-ui/react-components'; import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem, } from '@brightlayer-ui/react-components/core/Drawer'; import { boolean, text } from '@storybook/addon-knobs'; import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types'; import React, { useState } from 'react'; export const withMultipleNavGroups = (): StoryFnReactReturnType => { const [selected, setSelected] = useState(''); const navGroupItems1: NavItem[] = [ { title: 'Identity Management', itemID: '1', icon: <Person />, onClick: (): void => setSelected('1'), }, { title: 'Calendar', itemID: '2', icon: <Today />, onClick: (): void => setSelected('2'), }, { title: 'Accessibility', itemID: '3', icon: <Accessibility />, onClick: (): void => setSelected('3'), }, { title: 'Notifications', itemID: '4', icon: <NotificationsActive />, onClick: (): void => setSelected('4'), }, ]; const navGroupItems2: NavItem[] = [ { title: 'Settings', itemID: '2-1', icon: <Settings />, onClick: (): void => setSelected('2-1'), }, { title: 'Legal', itemID: '2-2', icon: <Gavel />, onClick: (): void => setSelected('2-2'), }, ]; return ( <Drawer open={boolean('open', true)} activeItem={selected}> <DrawerHeader icon={<Menu />} title={'Brightlayer UI Drawer'} subtitle={'with multiple navigation groups'} /> <DrawerBody> <DrawerNavGroup title={text('navGroup[0].title', 'First DrawerNavGroup')} titleDivider={boolean('titleDivider', true)} items={navGroupItems1} /> {boolean('Add Spacer', true) && <Spacer />} <DrawerNavGroup title={text('navGroup[1].title', 'Second DrawerNavGroup')} titleDivider={boolean('titleDivider', true)} items={navGroupItems2} /> </DrawerBody> </Drawer> ); }; withMultipleNavGroups.story = { name: 'with multiple Drawer Nav Groups' };