Add Bootstrap v5 support for Navbars

addon/components/bs-navbar.hbs

@@ -13,10 +13,16 @@
   ) as |yieldedHash|}}
   {{#if (macroCondition (macroGetOwnConfig "isNotBS3"))}}
     <nav class="navbar {{this.positionClass}} {{this.typeClass}} {{this.breakpointClass}} {{this.backgroundClass}}" ...attributes>
-      {{#if this.fluid}}
-        {{yield yieldedHash}}
+      {{#if (macroCondition (macroGetOwnConfig "isBS4"))}}
+        {{#if this.fluid}}
+          {{yield yieldedHash}}
+        {{else}}
+          <div class="container">
+            {{yield yieldedHash}}
+          </div>
+        {{/if}}
       {{else}}
-        <div class="container">
+        <div class={{this.containerClass}}>
           {{yield yieldedHash}}
         </div>
       {{/if}}

addon/components/bs-navbar.js

@@ -135,6 +135,25 @@ export default class Navbar extends Component {
   @defaultValue
   fluid = true;
 
+  /**
+   * BS5 only: Allows to override the container layout, see https://getbootstrap.com/docs/5.0/components/navbar/#containers.
+   * Allowed values: `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'`, see https://getbootstrap.com/docs/5.0/layout/containers/.
+   * By default it is `.container-fluid`, or `.container` if the `@fluid` argument is set to false.
+   *
+   * @property container
+   * @type string
+   * @public
+   */
+
+  @computed('fluid', 'container')
+  get containerClass() {
+    if (this.container) {
+      return `container-${this.container}`;
+    }
+
+    return this.fluid ? 'container-fluid' : 'container';
+  }
+
   /**
    * Specifies the position classes for the navbar, currently supporting none, "fixed-top", "fixed-bottom", and
    * either "static-top" (BS3) or "sticky-top" (BS4).

tests/integration/components/bs-navbar-test.js

@@ -6,6 +6,8 @@ import {
   positionStickyClass,
   test,
   testBS3,
+  testBS4,
+  testBS5,
   testNotBS3,
   visibilityClass,
 } from '../../helpers/bootstrap';
@@ -33,7 +35,7 @@ module('Integration | Component | bs-navbar', function (hooks) {
     assert.dom('nav > div').hasClass('container-fluid', 'the div is a fluid container');
   });
 
-  testNotBS3('it has correct default markup', async function (assert) {
+  testBS4('it has correct default markup', async function (assert) {
     await render(hbs`<BsNavbar />`);
 
     assert.dom('nav').exists({ count: 1 }, 'there is only one nav element');
@@ -42,6 +44,16 @@ module('Integration | Component | bs-navbar', function (hooks) {
     // No container by default because fluid is automatic
   });
 
+  testBS5('it has correct default markup', async function (assert) {
+    await render(hbs`<BsNavbar />`);
+
+    assert.dom('nav').exists({ count: 1 }, 'there is only one nav element');
+    assert.dom('nav').hasClass('navbar', 'the navbar has the navbar class');
+    assert.dom('nav').hasClass('navbar-light', 'the navbar has the navbar-default class');
+    assert.dom('nav > div').exists({ count: 1 }, 'there is a div right under the nav element');
+    assert.dom('nav > div').hasClass('container-fluid', 'the div is a fluid container');
+  });
+
   test('it handles inverse navbars properly', async function (assert) {
     await render(hbs`<BsNavbar @type="inverse" />`);
 
@@ -56,6 +68,13 @@ module('Integration | Component | bs-navbar', function (hooks) {
     assert.dom('nav > div').hasNoClass('container-fluid', 'the wrapping div does not have the container-fluid class');
   });
 
+  testBS5('it supports custom containers', async function (assert) {
+    await render(hbs`<BsNavbar @container="md" />`);
+
+    assert.dom('nav > div').hasClass('container-md', 'the wrapping div has the container class');
+    assert.dom('nav > div').hasNoClass('container-fluid', 'the wrapping div does not have the container-fluid class');
+  });
+
   testBS3('it handles the toggling action properly', async function (assert) {
     await render(hbs`
       <BsNavbar as |navbar|>