How to check if React Bootstrap Navbar has collapsed?

user_5905198 0
Viewed 1073

I want to change the content of the collapsed Navbar but can't find any props or events for it. Here is my Navbar with Dropdown in non collapsed state.

1

And collapsed Navbar. Need to change Dropdown for something else.

2

Sample code

<Navbar expand="sm" bg="primary" variant="dark" fixed="top">
    <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
    <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="ml-auto">
            <NavDropdown>
                <NavDropdown.Item>Profile</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item>Log out</NavDropdown.Item>
            </NavDropdown>
        </Nav>
    </Navbar.Collapse>
</Navbar>

How to do it in a proper way? Thanks in advance!

navbar react-bootstrap reactjs javascript
1 Answers

I was able to do this by binding to the onToggle function of the Navbar and using it to set a boolean.

const Header = () => {
    const [expanded, setExpanded] = useState(false)

    const setToggle = () => {
        console.log('toggle');
        setExpanded(true)
    }
    
    return (
            <Navbar expand="sm" onToggle={setToggle}>
                <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                        {expanded && <NavDropdown>
                            <NavDropdown.Item>Profile</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item>Log out</NavDropdown.Item>
                        </NavDropdown>}
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
    )
}
user_86983740
Related