@material-ui/icons#Menu TypeScript Examples
The following examples show how to use
@material-ui/icons#Menu.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: with-basic-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withBasicConfig = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: 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'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader icon={<Menu />} title={text('title', 'Simple Drawer')} />
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #2
| Source File: with-different-variants.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withDifferentVariants = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: NavItem[] = [
{
title: 'Settings',
itemID: '1',
icon: <Settings />,
onClick: (): void => setSelected('1'),
},
{
title: 'Legal',
itemID: '2',
icon: <Gavel />,
onClick: (): void => setSelected('2'),
},
];
return (
<Drawer
open={boolean('open', true)}
variant={select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent')}
condensed={boolean('condensed (rail only)', false)}
ModalProps={{
disableEnforceFocus: true,
}}
activeItem={selected}
>
<DrawerHeader icon={<Menu />} title={'Drawer with variants'} />
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #3
| Source File: with-full-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
getIcon = (icon: string): JSX.Element | undefined => {
switch (icon) {
case '<Add />':
return <Add />;
case '<PinDrop />':
return <PinDrop />;
case '<Remove />':
return <Remove />;
case '<AddAPhoto />':
return <AddAPhoto />;
case '<Menu />':
return <Menu />;
case '<FitnessCenter />':
return <FitnessCenter />;
case '<Dashboard />':
return <Dashboard />;
case 'undefined':
default:
return undefined;
}
}
Example #4
| Source File: with-full-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withFullConfig = (): StoryFnReactReturnType => {
const classes = useStyles();
const direction = getDirection();
const appBarGroupId = 'AppBar';
const threeLinerGroupId = 'ThreeLiner';
// AppBar props
const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);
const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
// ThreeLiner props
const title = text('title', 'title', threeLinerGroupId);
const subtitle = text('subtitle', 'subtitle', threeLinerGroupId);
const info = text('info', 'info', threeLinerGroupId);
return (
<AppBar
expandedHeight={expandedHeight}
collapsedHeight={collapsedHeight}
scrollThreshold={scrollThreshold}
animationDuration={animationDuration}
backgroundImage={showBackgroundImage ? bgImage : undefined}
variant={variant}
classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
>
<Toolbar classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}>
<IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
<Menu />
</IconButton>
<Spacer />
<ThreeLiner
classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
title={title}
subtitle={subtitle}
info={info}
animationDuration={animationDuration}
/>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<IconButton onClick={action('home icon clicked...')} color={'inherit'}>
<Home />
</IconButton>
<IconButton onClick={action('work icon clicked...')} color={'inherit'}>
<Work />
</IconButton>
<IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
<Settings />
</IconButton>
</div>
</Toolbar>
</AppBar>
);
}
Example #5
| Source File: with-custom-header.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withCustomHeader = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: 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'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader
backgroundImage={farmBgImage}
backgroundOpacity={0.5}
icon={<Menu />}
titleContent={
<div
style={{
display: 'flex',
justifyContent: 'space-between',
zIndex: 1,
padding: '0 16px',
alignItems: 'center',
width: '100%',
height: '100%',
}}
>
<div>
<Typography variant="subtitle2">Customizable</Typography>
<Typography variant="h6" style={{ marginTop: '-10px' }}>
Header Content
</Typography>
</div>
<ListItemTag style={{ marginBottom: 16 }} label={'v1.0.3'} />
</div>
}
/>
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #6
| Source File: with-footer.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withFooter = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: NavItem[] = [
{
title: 'Settings',
itemID: '1',
icon: <Settings />,
onClick: (): void => setSelected('1'),
},
{
title: 'Legal',
itemID: '2',
icon: <Gavel />,
onClick: (): void => setSelected('2'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader icon={<Menu />} title={'Footer Example'} />
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
<DrawerFooter
backgroundColor={color('backgroundColor', Colors.white[50])}
hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
divider={boolean('divider', true)}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
padding: 16,
}}
>
<img
src={useDarkMode() ? EatonFooterLogoDark : EatonFooterLogoLight}
alt="Eaton Logo"
height={28}
width={'auto'}
/>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography
variant={'caption'}
>{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
<Typography variant={'caption'}>All Rights Reserved</Typography>
</div>
</div>
</DrawerFooter>
</Drawer>
);
}
Example #7
| Source File: with-multiple-DrawerNavGroups.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
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>
);
}
Example #8
| Source File: with-subheader.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withSubheader = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const valuesObj = {
filter: 'Filter',
accordion: 'Accordion',
};
const optionsObj = {
display: 'inline-radio' as OptionsKnobOptionsDisplay,
};
const subheaderContent = optionsKnob('Subheader Content', valuesObj, 'Filter', optionsObj);
const navGroupItems: 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'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader icon={<Menu />} title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} />
<DrawerSubheader
hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
divider={boolean('divider', true)}
>
<div
style={{
display: 'flex',
justifyContent: 'center',
padding: '1rem 16px',
}}
>
{subheaderContent === 'Filter' ? filter : accordion}
</div>
</DrawerSubheader>
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #9
| Source File: with-blui-app-bar.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withBluiAppBar = (): StoryFnReactReturnType => {
const classes = useStyles();
const direction = getDirection();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
const appBarGroupId = 'AppBar';
const threeLinerGroupId = 'ThreeLiner';
const toolbarMenuGroupId = 'ToolbarMenu';
// AppBar props
const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
const collapsedDesktopHeight = number('collapsedDesktopHeight', 64, {}, appBarGroupId);
const collapsedMobileHeight = number('collapsedMobileHeight', 56, {}, appBarGroupId);
const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
// ThreeLiner props
const title = text('title', 'title', threeLinerGroupId);
const info = text('info', 'info', threeLinerGroupId);
// ToolbarMenu props
const toolbarLabel = text('label', 'Subtitle', toolbarMenuGroupId);
return (
<>
<AppBar
expandedHeight={expandedHeight}
collapsedHeight={!isMobile ? collapsedDesktopHeight : collapsedMobileHeight}
scrollThreshold={scrollThreshold}
animationDuration={animationDuration}
backgroundImage={showBackgroundImage ? bgImage : undefined}
variant={variant}
classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
>
<Toolbar
classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}
>
<IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
<Menu />
</IconButton>
<Spacer />
<ThreeLiner
classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
title={title}
subtitle={
<ToolbarMenu
classes={{ root: classes.toolbarMenuRoot }}
label={toolbarLabel}
menuGroups={menuGroups}
></ToolbarMenu>
}
info={info}
animationDuration={animationDuration}
/>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<IconButton onClick={action('home icon clicked...')} color={'inherit'}>
<Home />
</IconButton>
<IconButton onClick={action('work icon clicked...')} color={'inherit'}>
<Work />
</IconButton>
<IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
<Settings />
</IconButton>
</div>
</Toolbar>
</AppBar>
<div>{getBodyFiller()}</div>
</>
);
}
