Merge pull request #37 from fleetbase/dev-v0.2.8

v0.2.8
fleetbase · Dec 25, 2023 · 922777d · 922777d
2 parents fae69d1 + 899d11c
commit 922777d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
@@ -3,8 +3,8 @@
         <LinkToExternal @route="console" class="logo navbar-logo mr-4">
             <LogoIcon @brand={{@brand}} @size="8" />
         </LinkToExternal>
-        {{#if @sidebarToggleEnabled}}
-            <Layout::Header::SidebarToggle class="mr-2" />
+        {{#if @showSidebarToggle}}
+            <Layout::Header::SidebarToggle class="mr-2" @onToggle={{@onSidebarToggle}} @disabled={{not @sidebarToggleEnabled}} />
         {{/if}}
         {{#unless (media "isMobile")}}
             <div role="menu" class="next-catalog-menu-items flex mr-4">

diff --git a/addon/components/layout/header/sidebar-toggle.hbs b/addon/components/layout/header/sidebar-toggle.hbs
@@ -1,4 +1,4 @@
-<div class="sidebar-toggle-button-wrapper flex-shrink-0 {{if this.isSidebarVisible "sidebar-is-visible"}}" ...attributes>
+<div class="sidebar-toggle-button-wrapper flex-shrink-0 {{if @disabled "disabled opacity-50"}} {{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" data-name="sidebar-toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 340">
             <rect x="0" y="0" width="150" height="340" fill={{if this.isSidebarVisible "white" "transparent"}} rx="40" ry="40"></rect>

diff --git a/addon/components/layout/header/sidebar-toggle.js b/addon/components/layout/header/sidebar-toggle.js
@@ -8,6 +8,10 @@ export default class LayoutHeaderSidebarToggleComponent extends Component {
     @tracked isSidebarVisible = true;
 
     @action toggleSidebar() {
+        if (this.args.disabled === true) {
+            return;
+        }
+
         const sidebar = this.universe.sidebarContext;
 
         if (this.isSidebarVisible) {
@@ -17,5 +21,9 @@ export default class LayoutHeaderSidebarToggleComponent extends Component {
         }
 
         this.isSidebarVisible = !this.isSidebarVisible;
+
+        if (typeof this.args.onToggle === 'function') {
+            this.args.onToggle(sidebar, this.isSidebarVisible);
+        }
     }
 }
diff --git a/addon/styles/components/sidebar-toggle.css b/addon/styles/components/sidebar-toggle.css
@@ -2,6 +2,13 @@
     flex-shrink: 0;
 }
 
+.sidebar-toggle-button-wrapper.disabled:hover,
+.sidebar-toggle-button-wrapper.disabled > button:hover {
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+}
+
 .sidebar-toggle-button-wrapper > .sidebar-toggle-button.next-org-button-trigger,
 .sidebar-toggle-button-wrapper > .sidebar-toggle-button {
     display: flex;