ember-bootstrap utilizes its own JavaScript functionality instead of Bootstrap's.
It offers custom interactive components powered by Ember.
The Navbar's collapsed/expanded state is controlled by the collapsed argument, which is passed from the parent component to the Navbar in this manner:
<BsNavbar
@collapsed={{this.isNavbarCollapsed}}
>
Clicking on the hamburger menu triggers the Navbar's onCollapse or onExpand action. These actions should also be defined in the parent template:
<BsNavbar
@collapsed={{this.isNavbarCollapsed}}
@onCollapse={{fn this.setNavbarCollapsed true}}
@onExpand={{fn this.setNavbarCollapsed false}}
>
class ParentComponent extends Component {
@tracked isNavbarCollapsed = false;
@action setNavbarCollapsed(state) {
this.isNavbarCollapsed = state;
}
}
The official documentation for ember-bootstrap Navbar uses a shortcut method like this:
<BsNavbar
@collapsed={{this.isNavbarCollapsed}}
@onCollapse={{action (mut collapsed) true}}
@onExpand={{action (mut collapsed) false}}
>
mut is an older feature of Ember that allows you to implement the Navbar in the parent template without adding code to the parent JS file.
PS The official documentation mentions @collapsed={{true}}, but this is incorrect. Using a static value like this prevents state changes. The demo referenced in the documentation actually uses @collapsed={{collapsed}}. As per modern Ember guidelines, it should be written as @collapsed={{this.collapsed}}.