Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | import React from 'react';
import { Story } from '@storybook/react';
import Button from '../components/Button/Button';
import NavItem from '../components/Navbar/NavItem';
import NavSection from '../components/Navbar/NavSection';
import Navbar, { Props as NavbarProps } from '../components/Navbar/Navbar';
import SubNavbar from '../components/Navbar/SubNavbar';
export default {
title: 'Navbar',
component: Navbar,
argTypes: {
backgroundTransparent: false,
},
};
const Template = (args: NavbarProps & { title?: boolean }) => {
const [selectedItem, setSelectedItem] = React.useState('accessions');
// eslint-disable-next-line @typescript-eslint/no-empty-function
const showNavbar = () => {};
return (
<Navbar setShowNavBar={showNavbar} backgroundTransparent={args.backgroundTransparent}>
{args.title && <NavSection title='Account' separator={false} />}
<NavItem label='Home' icon='home' selected={selectedItem === 'home'} onClick={() => setSelectedItem('home')} />
<NavItem
label='Species'
icon='species'
selected={selectedItem === 'species'}
onClick={() => setSelectedItem('species')}
/>
<NavSection />
<NavItem label='Seeds' icon='seeds'>
<SubNavbar>
<NavItem
label='Dashboard'
selected={selectedItem === 'seeds-dashboard'}
onClick={() => setSelectedItem('seeds-dashboard')}
/>
<NavItem
label='Accessions'
selected={selectedItem === 'accessions'}
onClick={() => setSelectedItem('accessions')}
/>
<NavItem
label='Monitoring'
selected={selectedItem === 'monitoring'}
onClick={() => setSelectedItem('monitoring')}
/>
</SubNavbar>
</NavItem>
<NavItem label='Seedlings' icon='iconSeedling'>
<SubNavbar>
<NavItem
label='Inventory'
selected={selectedItem === 'inventory'}
onClick={() => setSelectedItem('inventory')}
/>
<NavItem
label='Withdrawal Log'
selected={selectedItem === 'withdrawallog'}
onClick={() => setSelectedItem('withdrawallog')}
/>
</SubNavbar>
</NavItem>
<NavSection title='Settings' />
<NavItem
label='Organization'
icon='organizationNav'
selected={selectedItem === 'organization'}
onClick={() => setSelectedItem('organization')}
/>
<NavItem
label='People'
icon='peopleNav'
selected={selectedItem === 'people'}
onClick={() => setSelectedItem('people')}
disabled
/>
<NavItem label='Locations' icon='seedbankNav'>
<SubNavbar>
<NavItem
label='Seed Bank'
selected={selectedItem === 'seedbank'}
onClick={() => setSelectedItem('seedbank')}
disabled
/>
<NavItem
label='Nurseries'
selected={selectedItem === 'nurseries'}
onClick={() => setSelectedItem('nurseries')}
/>
<NavItem
label='Planting Sites'
selected={selectedItem === 'plantingsites'}
onClick={() => setSelectedItem('plantingsites')}
/>
</SubNavbar>
</NavItem>
<NavSection />
<NavItem label='Contact Us' href={'mailto:hello@world.com'} />
<NavItem
label={
<Button
label='Logout'
type='productive'
priority='primary'
size='small'
disabled={false}
onClick={() => {
window.alert('nav click');
}}
/>
}
/>
</Navbar>
);
};
const WithoutTitle: Story<NavbarProps> = (args) => <Template {...args} />;
const WithTitle: Story<NavbarProps> = (args) => <Template {...args} title={true} />;
export const Default = WithoutTitle.bind({});
export const Title = WithTitle.bind({});
|