Add mobilemenu.less

public/css/icinga/mobilemenu.less

@@ -0,0 +1,101 @@
+#mobile-menu {
+  border-top: 1px solid @gray-lighter;
+  background: @body-bg-color;
+
+  .nav-level-1 {
+    display: flex;
+    align-items: stretch;
+
+    > li {
+      flex: 1 1 auto;
+      width: 0;
+      text-align: center;
+
+      &.active > a,
+      &.active > button {
+        background: @menu-highlight-color;
+        color: @text-color-inverted;
+      }
+
+      &:not(.active) a:hover {
+        background: @menu-hover-bg-color;
+      }
+
+      > a,
+      > button {
+        font-size: .5em;
+        height: 100%;
+
+        // Reset font-size for child elements
+        > * {
+          font-size: 1/.5em;
+        }
+
+        > i {
+          display: block;
+          font-size: 2.5em;
+          opacity: .8;
+          line-height: 1.25;
+
+          &:before {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .nav-level-2 {
+    >li {
+      &.selected {
+        background: @menu-2ndlvl-active-bg-color;
+        color: @menu-2ndlvl-active-color;
+      }
+    }
+  }
+
+  .active, .selected {
+    background: @menu-active-bg-color;
+    color: @menu-active-color;
+  }
+
+  .flyout {
+    position: fixed;
+    bottom: 3.5em;
+    left: 1em;
+    right: 1em;
+    font-size: 12em/16;
+
+    &:before {
+      right: 10%;
+      margin-right: -1.25em;
+    }
+  }
+
+  button {
+    .appearance(none);
+    background: none;
+    border: none;
+    width: 100%;
+  }
+}
+
+#layout.more-menu-open {
+  #mobile-menu .flyout {
+    display: block;
+  }
+
+  #toggle-more {
+    background: @menu-hover-bg-color;
+    color: @menu-active-color;
+  }
+}
+
+// Show #mobile-menu only on mobile
+#layout:not(.minimal-layout) #mobile-menu {
+  display: none;
+}
+
+.nav a:hover {
+  text-decoration: none;
+}