Fixed navigator scrolling and style

platypush/backend/http/webapp/src/components/Nav.vue

@@ -92,7 +92,7 @@ export default {
 <style lang="scss" scoped>
 $toggler-height: 2em;
 $footer-collapsed-height: 4em;
-$footer-expanded-height: 8.25em;
+$footer-expanded-height: 7.5em;
 
 nav {
   @media screen and (max-width: $tablet) {
@@ -125,7 +125,7 @@ nav {
   }
 
   li {
-    box-shadow: $nav-box-shadow-entry;
+    border: $nav-entry-border;
     cursor: pointer;
     list-style: none;
 
@@ -158,10 +158,12 @@ nav {
   .toggler {
     width: 100%;
     display: flex;
+    background: $nav-toggler-bg;
     font-size: 1.5em;
     cursor: pointer;
-    padding: 0.4em;
+    padding: 0.6em;
     align-items: center;
+    box-shadow: $nav-toggler-shadow;
   }
 
   .hostname {
@@ -179,13 +181,13 @@ nav {
   }
 
   .plugins {
-    height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - .75em);
+    height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - 1.4em);
     overflow: auto;
   }
 
   .footer {
     height: $footer-expanded-height;
-    background: none;
+    background: $nav-footer-bg;
     padding: 0;
     margin: 0;
   }
@@ -221,16 +223,15 @@ nav {
 
     .toggler {
       height: $toggler-height;
+      background: none;
       text-align: center;
-    }
-
-    .plugins {
-      height: calc(100% - #{$toggler-height} - #{$footer-collapsed-height});
-      overflow: auto;
+      padding: 0.4em;
+      box-shadow: none;
     }
 
     .footer {
       height: $footer-collapsed-height;
+      background: none;
       padding: 0;
       margin-bottom: .5em;
     }
@@ -245,9 +246,22 @@ nav {
       display: flex;
       flex-direction: column;
       justify-content: center;
+      height: calc(100% - #{$toggler-height} - #{$footer-collapsed-height});
+      overflow: hidden;
+
+      &.plugins {
+        @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
+          justify-content: left;
+          margin: 2em 0;
+        }
+      }
+
+      &:hover {
+        overflow: auto;
+      }
 
       li {
-        box-shadow: none;
+        border: none;
         padding: 0;
         text-align: center;
 

platypush/backend/http/webapp/src/style/themes/light.scss

@@ -81,8 +81,11 @@ $active-bg: #8fefb7 !default;
 $disabled-fg: rgb(155, 155, 155);
 
 /// Navigator
-$nav-bg: #002626 !default;
+$nav-bg: #141a18 !default;
 $nav-fg: #e8f8e8 !default;
+$nav-toggler-bg: black !default;
+$nav-toggler-shadow: 0 1px 1px 2px #191d1a !default;
+$nav-footer-bg: black !default;
 $nav-entry-selected-bg: #205046 !default;
 $nav-entry-hover-bg: #104036 !default;
 $nav-entry-collapsed-selected-bg: rgba(160, 245, 178, 0.95) !default;
@@ -90,6 +93,7 @@ $nav-entry-collapsed-hover-bg: rgba(160, 245, 178, 0.60) !default;
 $nav-box-shadow-main: 1px 0 2px #002626;
 $nav-box-shadow-entry: 0 0 1px 1px #103824 !default;
 $nav-box-shadow-collapsed: 1px 0 2px 1px #bbb !default;
+$nav-entry-border: 1px solid #183020 !default;
 $nav-collapsed-bg: white;
 $nav-collapsed-fg: #5e5e5e;