import * as React from 'react'; import { boolean } from '@storybook/addon-knobs'; import { State, Store } from '@sambego/storybook-state'; import Link from '../../link/Link'; import MenuItem from '../MenuItem'; import MenuLinkItem from '../MenuLinkItem'; import MenuSectionHeader from '../MenuSectionHeader'; import MenuSeparator from '../MenuSeparator'; import SelectMenuLinkItem from '../SelectMenuLinkItem'; import SubmenuItem from '../SubmenuItem'; import Menu from '../Menu'; import notes from './Menu.stories.md'; export const basic = () => ( View Profile Help Menu Section Awesome Link ); export const withSubmenu = () => (
View Profile Submenu View Profile Help Help
); export const withSubmenuFlip = () => (
View Profile Submenu View Profile Help Help Help
); export const withSelectMenu = () => ( View Profile Awesome Link ); export const withChildOnResize = () => { const componentStore = new Store({ isLargeMenu: false }); const setVisibility = () => { if (window.innerWidth < 700 && !componentStore.get('isLargeMenu')) { componentStore.set({ isLargeMenu: true }); } }; window.addEventListener('resize', setVisibility); return ( {state => ( View Profile Help {state.isLargeMenu && Visible on Resize} Last Item )} ); }; export default { title: 'Components|Menu', component: Menu, parameters: { notes, }, };