none
How can toggle menu in Fabric UI/Fluent UI RRS feed

  • Question

  • I am extremely new to React/Fluent UI and not sure how to approach this concept. For starters, we have a menu and a main panel

    Here is the code

    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 React/Fluent UI?

    Thank you every one in advance

    Friday, November 6, 2020 7:23 AM