How can I toggle menus in Fabric UI/Fluent UI/React

%3CLINGO-SUB%20id%3D%22lingo-sub-1859924%22%20slang%3D%22en-US%22%3EHow%20can%20I%20toggle%20menus%20in%20Fabric%20UI%2FFluent%20UI%2FReact%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1859924%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20extremely%20new%20to%20React%2FFluent%20UI%20and%20not%20sure%20how%20to%20approach%20this%20concept.%20No%20matter%20what%20I%20do%2C%20I%20cannot%20apply%20a%20simple%20click%20to%20any%20of%20the%20menus.%3C%2FP%3E%3CP%3EFor%20starters%2C%20we%20have%20a%20menu%20and%20a%20main%20panel%3C%2FP%3E%3CP%3EHere%20is%20the%20code%20for%20the%20menu%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20*%20%3CSPAN%20class%3D%22hljs-keyword%22%3Eas%3C%2FSPAN%3E%20React%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'react'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20*%20%3CSPAN%20class%3D%22hljs-keyword%22%3Eas%3C%2FSPAN%3E%20ReactDOM%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'react-dom'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20styles%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'.%2FTopMenu.module.scss'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20%7B%20ITopMenuProps%20%7D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'.%2FITopMenuProps'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20%7B%20TopMenuBar%20%7D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'..%2FTopMenuBar'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20%7B%20Icon%20%7D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'office-ui-fabric-react%2Flib%2FIcon'%3C%2FSPAN%3E%3B%0A%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Econst%3C%2FSPAN%3E%20MyIcon%20%3D%20%3CSPAN%20class%3D%22hljs-function%22%3E()%20%3D%26gt%3B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22xml%22%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EIcon%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EiconName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22SkypeCircleCheck%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3B%0A%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eexport%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-class%22%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Eclass%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-title%22%3ETopMenu%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-keyword%22%3Eextends%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-title%22%3EReact%3C%2FSPAN%3E.%3CSPAN%20class%3D%22hljs-title%22%3EComponent%3C%2FSPAN%3E%26lt%3B%3CSPAN%20class%3D%22hljs-title%22%3EITopMenuProps%3C%2FSPAN%3E%26gt%3B%20%3C%2FSPAN%3E%7B%0A%20%20%20%20public%20state%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3EmainMenu%3C%2FSPAN%3E%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Eid%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-number%22%3E1%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Etitle%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'One'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Esection%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'creation'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Ecompleted%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-literal%22%3Efalse%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Eid%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-number%22%3E2%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Etitle%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'Two'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Esection%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'creation'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Ecompleted%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-literal%22%3Efalse%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Eid%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-number%22%3E3%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Etitle%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'Three'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Esection%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'creation'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Ecompleted%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-literal%22%3Efalse%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Eid%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-number%22%3E16%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Etitle%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'four'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Esection%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-string%22%3E'web'%3C%2FSPAN%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Ecompleted%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-literal%22%3Efalse%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%3B%0A%20%20%20%20%0A%20%20%20%20public%20render()%3A%20React.ReactElement%3CITOPMENUPROPS%3E%20%7B%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-keyword%22%3Ereturn%3C%2FSPAN%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22xml%22%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3ETopMenuBar%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3EmainMenu%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7Bthis.state.mainMenu%7D%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attr%22%3Ephase%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7Bthis.props.phase%7D%2F%3C%2FSPAN%3E%26gt%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%7D%3C%2FITOPMENUPROPS%3E%3C%2FPRE%3E%3CP%3E%3CSPAN%3EHere%20is%20our%20main%20page%20that%20comes%20up%3C%2FSPAN%3E%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20*%20%3CSPAN%20class%3D%22hljs-keyword%22%3Eas%3C%2FSPAN%3E%20React%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'react'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20*%20%3CSPAN%20class%3D%22hljs-keyword%22%3Eas%3C%2FSPAN%3E%20ReactDOM%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'react-dom'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20styles%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'.%2FEventsTemplate.module.scss'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20%7B%20IEventsTemplateProps%20%7D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'.%2FIEventsTemplateProps'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20%7B%20Icon%20%7D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'office-ui-fabric-react%2Flib%2FIcon'%3C%2FSPAN%3E%3B%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eimport%3C%2FSPAN%3E%20%7B%20TopMenu%20%7D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Efrom%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-string%22%3E'..%2FTopMenu'%3C%2FSPAN%3E%3B%0A%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Econst%3C%2FSPAN%3E%20MyIcon%20%3D%20%3CSPAN%20class%3D%22hljs-function%22%3E()%20%3D%26gt%3B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22xml%22%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EIcon%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EiconName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22CompassNW%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3B%0A%0A%3CSPAN%20class%3D%22hljs-keyword%22%3Eexport%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-class%22%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Eclass%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-title%22%3EEventsTemplate%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-keyword%22%3Eextends%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-title%22%3EReact%3C%2FSPAN%3E.%3CSPAN%20class%3D%22hljs-title%22%3EComponent%3C%2FSPAN%3E%26lt%3B%3CSPAN%20class%3D%22hljs-title%22%3EIEventsTemplateProps%3C%2FSPAN%3E%26gt%3B%20%3C%2FSPAN%3E%7B%0A%0A%20%20%20%20public%20render()%3A%20React.ReactElement%3CIEVENTSTEMPLATEPROPS%3E%20%7B%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-keyword%22%3Ereturn%3C%2FSPAN%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22xml%22%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ediv%3C%2FSPAN%3E%26gt%3B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ediv%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EclassName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Estyles.leftSidePanel%3C%2FSPAN%3E%20%7D%26gt%3B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ebutton%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EclassName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Estyles.leftSidePanelButton%3C%2FSPAN%3E%20%7D%26gt%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EIcon%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EiconName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22GridViewMedium%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-tag%22%3Ebutton%3C%2FSPAN%3E%26gt%3B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ebutton%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EclassName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Estyles.leftSidePanelButton%3C%2FSPAN%3E%20%7D%26gt%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EIcon%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EiconName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22Add%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-tag%22%3Ebutton%3C%2FSPAN%3E%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ebutton%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EclassName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Estyles.leftSidePanelBottomButton%3C%2FSPAN%3E%20%7D%26gt%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EIcon%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EiconName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22Back%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-tag%22%3Ebutton%3C%2FSPAN%3E%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3Ediv%3C%2FSPAN%3E%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ediv%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EclassName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Estyles.topPanel%3C%2FSPAN%3E%20%7D%26gt%3B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ediv%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EclassName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Estyles.title%3C%2FSPAN%3E%20%7D%26gt%3B%3C%2FSPAN%3E%7B%20this.props.title%20%7D%3CSPAN%20class%3D%22hljs-tag%22%3Ediv%3C%2FSPAN%3E%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3ETopMenu%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Ephase%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E'creation'%3C%2FSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3Ediv%3C%2FSPAN%3E%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ediv%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3EclassName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%7B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Estyles.mainPanel%3C%2FSPAN%3E%20%7D%26gt%3B%3C%2FSPAN%3EThis%20is%20the%20main%20panel%20***%3CSPAN%20class%3D%22hljs-tag%22%3Ediv%3C%2FSPAN%3E%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3Ediv%3C%2FSPAN%3E%26gt%3B%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%0A%7D%3C%2FIEVENTSTEMPLATEPROPS%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAt%20this%20point%20I%20am%20still%20struggling%20to%20understand%20how%2C%20using%20the%20above%20code%2C%20toggle%20between%20different%20panels%2C%20using%20the%20menu%20above%3F%3C%2FP%3E%3CP%3EIs%20there%20a%20simple%20approach%20to%20it%20using%20the%20Fabric%20UI%2FReact%2FFluent%20UI%3F%3C%2FP%3E%3CP%3EThank%20you%20every%20one%20in%20advance%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1859924%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Occasional Contributor

I am extremely new to React/Fluent UI and not sure how to approach this concept. No matter what I do, I cannot apply a simple click to any of the menus.

For starters, we have a menu and a main panel

Here is the code for the menu

 

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styles from './TopMenu.module.scss';
import { ITopMenuProps } from './ITopMenuProps';
import { TopMenuBar } from '../TopMenuBar';
import { Icon } from 'office-ui-fabric-react/lib/Icon';

const MyIcon = () => <Icon iconName="SkypeCircleCheck" />;

export class TopMenu extends React.Component<ITopMenuProps> {
    public state = {
        mainMenu: [
            {
                id: 1,
                title: 'One',
                section: 'creation',
                completed: false
            },
            {
                id: 2,
                title: 'Two',
                section: 'creation',
                completed: false
            },
            {
                id: 3,
                title: 'Three',
                section: 'creation',
                completed: false
            },
            {
                id: 16,
                title: 'four',
                section: 'web',
                completed: false
            }
        ]
    };
    
    public render(): React.ReactElement<ITopMenuProps> {
        return (
            <TopMenuBar
                mainMenu={this.state.mainMenu}
                phase={this.props.phase}/>
        );
    }
}

Here is our main page that comes up

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styles from './EventsTemplate.module.scss';
import { IEventsTemplateProps } from './IEventsTemplateProps';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { TopMenu } from '../TopMenu';

const MyIcon = () => <Icon iconName="CompassNW" />;

export class EventsTemplate extends React.Component<IEventsTemplateProps> {

    public render(): React.ReactElement<IEventsTemplateProps> {
        return (
            <div>
                <div className={ styles.leftSidePanel }>
                    <button className={ styles.leftSidePanelButton }><Icon iconName="GridViewMedium" /></button>
                    <button className={ styles.leftSidePanelButton }><Icon iconName="Add" /></button>
                    <button className={ styles.leftSidePanelBottomButton }><Icon iconName="Back" /></button>
                </div>
                <div className={ styles.topPanel }>
                    <div className={ styles.title }>{ this.props.title }</div>
                    <TopMenu phase='creation'/>
                </div>
                <div className={ styles.mainPanel }>This is the main panel ***</div>
            </div>
        );
    }

}

 

At this point I am still struggling to understand how, using the above code, toggle between different panels, using the menu above?

Is there a simple approach to it using the Fabric UI/React/Fluent UI?

Thank you every one in advance

0 Replies