proper way to implement reactstrap <Navbar> with submenu items? - reactjs

Question

I have a basic reactstrap implementation in my app. The menu items display as configured in a nice, responsive way. One of the configured top-level menu items is "Reports" and I need to add 2 selectable submenu items for 2 different reports under this top-level menu item.
Does proper responsive design dictate that only top-level menu items should display on the main page for proper responsive handling? Or is there a proper way to configure submenu items for this scenario? I'm not sure if I need to configure a more customized navigation design like this:
https://reactstrap.github.io/components/navs/
Or does the constraint exist because that is simply considered proper design for responsive websites?

Answer 1

I have a couple of responsive websites with several layers of submenus and i works well.
In Reactstrap there is an example of how to do expanding submenus. This is copied from https://reactstrap.github.io/?path=/docs/components-nav--navs#tabs
import React, { useState } from 'react';
import {
Nav,
NavItem,
Dropdown,
DropdownItem,
DropdownToggle,
DropdownMenu,
NavLink,
} from 'reactstrap';
function Example(props) {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(!dropdownOpen);
return (
<Nav tabs>
<NavItem>
<NavLink href="#" active>
Link
</NavLink>
</NavItem>
<Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">
Disabled Link
</NavLink>
</NavItem>
</Nav>
);
}
export default Example;
As you can see it uses useState to hold flags for the openness of the menu item. You can modify this to hold state for whether items are "selected" or whatever, then just draw with that state in mind, for example:
<DropdownItem disabled>Action</DropdownItem>
to
const [actionSelected, setActionSelected] = useState(false);
<DropdownItem disabled={actionSelected} onClick={()=>setActionSelected(true)}>Action</DropdownItem>