completed FLE-63 task

addon/components/layout/header.hbs

@@ -3,10 +3,16 @@
         <LinkToExternal @route="console" class="logo navbar-logo mr-4">
             <LogoIcon @brand={{@brand}} @size="8" />
         </LinkToExternal>
+        <Layout::Header::SidebarToggle class="mr-2" />
         {{#unless (media "isMobile")}}
             <div role="menu" class="next-catalog-menu-items flex mr-4">
                 {{#each @menuItems as |menuItem|}}
-                    <LinkToExternal @route={{menuItem.route}} id={{concat (dasherize menuItem.route) "-header-button"}} class="next-view-header-item truncate {{menuItem.class}}" role="menuitem">
+                    <LinkToExternal
+                        @route={{menuItem.route}}
+                        id={{concat (dasherize menuItem.route) "-header-button"}}
+                        class="next-view-header-item truncate {{menuItem.class}}"
+                        role="menuitem"
+                    >
                         <div class="w-6">
                             <FaIcon @icon={{menuItem.icon}} @size="sm" />
                         </div>
@@ -25,7 +31,8 @@
                 </LinkToExternal>
             </div>
         {{/unless}}
-        <div id="view-header-left-content-a"></div>
+        <div id="view-header-left-content-a">
+        </div>
         {{yield}}
         <div id="view-header-left-content-b"></div>
     </div>

addon/components/layout/header.js

@@ -3,6 +3,7 @@
 import { computed, action } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { isArray } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
 
 /**
  * Layout header component.
@@ -16,6 +17,7 @@
     @service router;
     @service hostRouter;
     @service universe;
+
     @alias('args.user') user;
 
     @computed('store', 'user.company_uuid') get company() {

addon/components/layout/header/sidebar-toggle.hbs

@@ -0,0 +1,9 @@
+<div class="sidebar-toggle-button-wrapper flex-shrink-0 {{if this.isSidebarVisible "sidebar-is-visible"}}" ...attributes>
+    <button type="button" {{on 'click' this.toggleSidebar}} class="sidebar-toggle-button next-org-button-trigger">
+        <svg id="sidebar-toggle-icon" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <path
+                d="M45.38,9.81H4.62c-1.65,0-3,1.35-3,3v26.1c0,1.65,1.35,3,3,3h40.76c1.65,0,3-1.35,3-3v-26.1C48.38,11.16,47.03,9.81,45.38,9.81z M3.62,38.91v-26.1c0-0.55,0.45-1,1-1H16.5v28.1H4.62C4.07,39.91,3.62,39.46,3.62,38.91z M46.38,38.91c0,0.55-0.45,1-1,1H18.5v-28.1h26.88c0.55,0,1,0.45,1,1V38.91z M5.74,17.5c0-0.55,0.45-1,1-1h6.35c0.55,0,1,0.45,1,1s-0.45,1-1,1H6.74C6.19,18.5,5.74,18.05,5.74,17.5z M14.1,22.52c0,0.55-0.45,1-1,1H6.74c-0.55,0-1-0.45-1-1s0.45-1,1-1h6.35C13.65,21.52,14.1,21.97,14.1,22.52z M14.1,27.54c0,0.55-0.45,1-1,1H6.74c-0.55,0-1-0.45-1-1s0.45-1,1-1h6.35C13.65,26.54,14.1,26.99,14.1,27.54z"
+            ></path>
+        </svg>
+    </button>
+</div>

addon/components/layout/header/sidebar-toggle.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { tracked } from '@glimmer/tracking';
+
+export default class LayoutHeaderSidebarToggleComponent extends Component {
+    @service universe;
+    @alias('universe.sidebarContext') sidebarContext;
+    @tracked isSidebarVisible = true;
+
+    @action toggleSidebar() {
+        if (this.isSidebarVisible) {
+            this.sidebarContext.hideNow();
+        } else {
+            this.sidebarContext.show();
+        }
+        this.isSidebarVisible = !this.isSidebarVisible;
+    }
+}

addon/styles/addon.css

@@ -41,6 +41,7 @@
 @import 'components/fleet-listing.css';
 @import 'components/drawer.css';
 @import 'components/full-calendar.css';
+@import 'components/sidebar-toggle.css';
 
 /** Third party */
 @import 'air-datepicker/air-datepicker.css';

addon/styles/components/sidebar-toggle.css

@@ -0,0 +1,26 @@
+.sidebar-toggle-button-wrapper {
+    flex-shrink: 0;
+}
+
+.sidebar-toggle-button-wrapper > .sidebar-toggle-button.next-org-button-trigger,
+.sidebar-toggle-button-wrapper > .sidebar-toggle-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.25rem;
+}
+
+.sidebar-toggle-button-wrapper > .sidebar-toggle-button > svg {
+    enable-background: new 0 0 50 50;
+    fill: rgb(249, 250, 251);
+    width: 20px;
+    height: 20px;
+}
+
+.sidebar-toggle-button-wrapper:hover > .sidebar-toggle-button > svg {
+    fill: #fff;
+}
+
+.sidebar-toggle-button-wrapper.sidebar-is-visible > .sidebar-toggle-button > svg {
+    /* fill: blue; */
+}

app/components/layout/header/sidebar-toggle.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/layout/header/sidebar-toggle';

tests/integration/components/layout/header/sidebar-toggle-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | layout/header/sidebar-toggle', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<Layout::Header::SidebarToggle />`);
+
+        assert.dom(this.element).hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Layout::Header::SidebarToggle>
+        template block text
+      </Layout::Header::SidebarToggle>
+    `);
+
+        assert.dom(this.element).hasText('template block text');
+    });
+});