Need Help: Navbar dropdown

Hello,
how exactly do I implement a solution for a drop-down within our navbar.jsx?

Please help,
I've tried adding SelectControl, but I am having trouble making it look and work correctly as the original bootstrap navbar with a drop-down.

Thank you for your time,
Kyle

The SelectControl is for meant for forms. What you probably want is to instrument a Navbar dropdown, which is built with an li and nested ul.

https://getbootstrap.com/docs/3.3/components/#navbar

You'll need to implement logic similar to expanding the Navbar menu when on mobile:

aqua/client/pages/main/navbar.jsx

Lines 52 to 55 in 4e7cb75

    
           const navBarCollapse = ClassNames({ 
        
               'navbar-collapse': true, 
        
               collapse: !this.state.navBarOpen 
        
           });

I've done this in another project. Here's a preview of what I do in the render method. Hopefully you can deduce the rest:

// ...

const menuClasses = ClassNames({
    dropdown: true,
    open: this.state.menuOpen
});

// ...

                 <li className={menuClasses}
                     onClick={this.toggleMenu.bind(this)}>

                     <a href="#">Menu <span className="caret"></span></a>
                     <ul className="dropdown-menu">
                         <li className={this.classForPath(/^\/admin\/foo/)}>
                             <Link to="/admin/foo">Foo</Link>
                         </li>
                         <li className={this.classForPath(/^\/admin\/bar/)}>
                             <Link to="/admin/bar">Bar</Link>
                         </li>
                     </ul>
                 </li>

I have it implemented but now when i click on the menu button,
i don't get a drop down function

You'll have to work through it. Pay attention to which elements you need and what classes they need for a certain state and you should be good.

Hi Reza,
Thank you for your patience with me!

I got it working :)

	const navBarCollapse = ClassNames({
	'navbar-collapse': true,
	collapse: !this.state.navBarOpen
	});