import { Meta , Story } from '@storybook/react' ; import { useState } from 'react' ; import { ExpandingMenu } from './ExpandingMenu' ; import { ApplicationBlack , ApplicationBlue , StatsBlack , StatsBlue , SettingsBlack , SettingsBlue , HelpBlack , HelpBlue , LogoutBlack , LogoutBlue , Hamburger } from '../../icons' ; import React from 'react' ; interface IUserDetails { name : string ; role : string ; } interface IMenuItem { icon : React . ReactNode ; iconHover ? : React . ReactNode ; label : string ; secondary ? : boolean ; onClick : ( e : React . MouseEvent ) => void ; } interface IProps { showMenu : boolean ; userDetails : IUserDetails ; menuItems : IMenuItem [ ] ; menuCollapse : ( ) => void ; } export default { title : 'Components/Interface/ExpandingMenu' , component : ExpandingMenu , argTypes : { showMenu : { control : { type : 'select' , options : [ true , false ] } } } } as Meta ; const menuItems = [ { icon : < ApplicationBlack />, iconHover : < ApplicationBlue />, label : 'Applications' , onClick : ( ) => alert ( 'on Click Event' ) } , { icon : < StatsBlack />, iconHover : < StatsBlue />, label : 'Performance' , onClick : ( ) => alert ( 'on Click Event' ) } , { icon : < SettingsBlack />, iconHover : < SettingsBlue />, label : 'Settings' , onClick : ( ) => alert ( 'on Click Event' ) } , { icon : < HelpBlack />, iconHover : < HelpBlue />, label : 'Help' , onClick : ( ) => alert ( 'on Click Event' ) } , { icon : < LogoutBlack />, iconHover : < LogoutBlue />, label : 'Logout' , secondary : true , onClick : ( ) => alert ( 'Logout' ) } ] ; const userDetails = { name : 'Yeasin' , role : 'Field agent' } ; const Template = ( ) => { const [ showMenu , setMenu ] = useState ( false ) ; return ( < > < Hamburger onClick = { ( ) => setMenu ( true ) } /> < ExpandingMenu showMenu = { showMenu } userDetails = { userDetails } menuItems = { menuItems } menuCollapse = { ( ) => setMenu ( false ) } /> < />); } ; export const ExpandingMenuView = Template . bind ( { } ) ;