Allow to collapse/expand the sidebar via a toggle button at the bottom of the sidebar

application/views/scripts/layout/menu.phtml

@@ -14,3 +14,7 @@ if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
     </form>
 <?php endif; ?>
 <?= $menuRenderer->setCssClass('primary-nav')->setElementTag('nav')->setHeading(t('Navigation')); ?>
+<button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>">
+    <i id="close-sidebar" class="icon-angle-double-left"></i>
+    <i id="open-sidebar" class="icon-angle-double-right"></i>
+</button>

public/css/icinga/layout.less

@@ -235,3 +235,60 @@ html.no-js .controls > .tabs {
 #sidebar {
   z-index: 2;
 }
+
+// Collpased sidebar
+#layout.sidebar-collapsed {
+  #header-logo {
+    background-image: url('../img/icinga-logo-compact.svg');
+  }
+
+  #main {
+    left: 3em;
+  }
+
+  #sidebar {
+    width: 3em;
+  }
+
+  #open-sidebar {
+    display: inline;
+  }
+
+  #close-sidebar {
+    display: none;
+  }
+
+  #menu {
+    .badge {
+      display: none;
+    }
+
+    img.icon {
+      margin: 0 1.25em -.25em 0.25em;
+      font-size: 1.5em;
+    }
+
+    .nav-item {
+      white-space: nowrap;
+    }
+
+    .nav-level-1 > .nav-item i {
+      font-size: 1.5em;
+      margin-right: .5em;
+    }
+  }
+
+  .search-input {
+    font-size: 1.25em;
+  }
+
+  .search-reset {
+    display: none;
+  }
+
+  .skip-links {
+    a, button {
+      width: 20em;
+    }
+  }
+}

public/css/icinga/menu.less

@@ -14,29 +14,43 @@
   overflow: auto;
 }
 
-#menu a {
+#layout:not(.minimal-layout) #menu {
-  &:focus {
+  padding-bottom: 2.25em;
-    color: @icinga-blue;
-    outline-offset: -3px;
-  }
-
-  &:hover {
-    color: @icinga-blue;
-    text-decoration: none;
-  }
-}
-
-#menu .active > a {
-  color: @icinga-blue;
 }
 
 #menu .nav-item {
   vertical-align: middle;
 
   > a {
-    overflow: hidden;
+    &:focus {
-    text-overflow: ellipsis;
+      color: @icinga-blue;
+      outline: -3px;
+    }
+
+    &:hover {
+      color: @icinga-blue;
+      text-decoration: none;
+    }
   }
+
+  &.active {
+    > a {
+      color: @icinga-blue;
+    }
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-item > a {
+  // Respect overflowing content
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item > a {
+  // Clip overflowing content
+  overflow: hidden;
+  width: 4em;
 }
 
 #menu .nav-level-1 > .nav-item {
@@ -48,11 +62,6 @@
       display: none;
     }
 
-    .nav-level-2 > li {
-      // Expand menu if active
-      display: block;
-    }
-
     background-color: @body-bg-color;
     border-color: @icinga-blue;
   }
@@ -87,6 +96,17 @@
   display: block;
 }
 
+#layout:not(.sidebar-collapsed) {
+  #menu .nav-level-1 > .nav-item {
+    &.active {
+      .nav-level-2 > li {
+        // Expand menu if active
+        display: block;
+      }
+    }
+  }
+}
+
 #menu img.icon {
   line-height: 1;
   margin: 0 0.2em;
@@ -122,6 +142,7 @@
 }
 
 // Hovered menu
+#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item:hover,
 #menu .nav-level-1 > .nav-item:not(.active):hover {
   > .nav-level-2 {
     &:before {
@@ -138,8 +159,6 @@
     color: @text-color-inverted;
     padding: @vertical-padding 0;
     position: fixed;
-    margin-left: 15.583em;
-    margin-top: -3.2em;
     width: 14em;
 
     > .nav-item {
@@ -158,6 +177,22 @@
   }
 }
 
+#menu .nav-level-1 > .nav-item:not(.active):hover {
+  > .nav-level-2 {
+    // Position relative to parent
+    margin-left: 15.583em;
+    margin-top: -3.167em;
+  }
+}
+
+#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item:hover {
+  > .nav-level-2 {
+    // Position relative to parent
+    margin-left: 3.583em;
+    margin-top: -3.333em;
+  }
+}
+
 // Accessibility skip links
 .skip-links {
   position: relative;
@@ -259,3 +294,38 @@ input[type=text].search-input {
     transform: none;
   }
 }
+
+// Toggle sidebar button
+#toggle-sidebar {
+  // Reset button styles
+  background: none;
+  border: none;
+  padding: 0;
+
+  color: @gray-light;
+
+  position: absolute;
+  bottom: 0;
+  right: 0;
+
+  i {
+    background: @body-bg-color;
+    border-radius: .25em 0 0 .25em;
+    font-size: 1.5em;
+    width: 2em;
+  }
+
+  &:hover {
+    i {
+      color: @icinga-blue;
+    }
+  }
+}
+
+#layout.minimal-layout #toggle-sidebar {
+  display: none;
+}
+
+#open-sidebar {
+  display: none;
+}

public/js/icinga/behavior/navigation.js

@@ -12,6 +12,7 @@
         this.on('click', '#menu tr[href]', this.linkClicked, this);
         this.on('rendered', '#menu', this.onRendered, this);
         this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.fixFlyoutPosition, this);
+        this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
 
         /**
          * The DOM-Path of the active item
@@ -219,6 +220,16 @@
         }
     };
 
+    /**
+     * Collapse or expand sidebar
+     *
+     * @param {Object} e Event
+     */
+    Navigation.prototype.toggleSidebar = function(e) {
+        $('#layout').toggleClass('sidebar-collapsed');
+        $(window).trigger('resize');
+    };
+
     /**
      * Called when the history changes
      *
@@ -255,4 +266,4 @@
 
     Icinga.Behaviors.Navigation = Navigation;
 
-}) (Icinga, jQuery);
+})(Icinga, jQuery);