Right aligned horizontal menu items

[aalubin]

I have a very simple horizontal menu:

Code: Select all

this.menu = [
            {label: 'Assignments', icon: 'build',  to: "/student/assignments"},
            {label: 'Classes', icon: 'class',  to: "/student/classes"},
            {label: 'Calendar', icon: 'date_range',  to: "/student/calendar"},
            {label: 'Settings', icon: 'settings',  to: "/student/settings"},
            {label: 'Logout', icon: 'exit_to_app'}
        ];

And I want the settings and logout options to be aligned to the right of the page. What would be an easy way to do that do that?

P.S. I am currently using the default AppMenu from the Serenity template:

Code: Select all

<div ref={(el) => this.sidebar = el} className={sidebarClassName} onClick={this.onSidebarClick}
    onMouseEnter={this.onSidebarMouseEnter} onMouseLeave={this.onSidebarMouseLeave}>

    <div className="sidebar-logo">
        <button className="p-link">
            <img alt="logo" src="assets/layout/images/logo-slim.png" />
            <span className="app-name">SERENITY</span>
        </button>
        <button className="p-link sidebar-anchor" title="Toggle Menu" onClick={this.onToggleMenuClick}> </button>
    </div>

    <div className="layout-menu-container">
        <AppMenu model={this.menu}  onRootMenuItemClick={this.onRootMenuItemClick} layoutMode={this.state.layoutMode}
                    active={this.state.menuActive} onMenuItemClick={this.onMenuItemClick}/>
    </div>
</div>

[aalubin]

resolved.

I defined menu items with a 'float' prop:

Code: Select all

{label: classes, icon: 'class',  to: "/student/classes",  float: 'start'}

And then on AppMenu, I inserted it as the float style of the menu item:

Code: Select all

<li className={styleClass} key={i} role="none" style={{float: item.float}}>...