From b5653e070ed222601e941dac0288faacb15ce3e2 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 27 Nov 2022 12:56:17 +0100
Subject: [PATCH] Style improvements for the main navigator

---
 .../http/webapp/src/components/Nav.vue        | 23 +++++++++++--------
 .../http/webapp/src/style/themes/light.scss   |  3 +++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue
index bc725c47..c145d452 100644
--- a/platypush/backend/http/webapp/src/components/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/Nav.vue
@@ -110,7 +110,7 @@ $footer-collapsed-height: 4em;
 $footer-expanded-height: 7.5em;
 
 nav {
-  @media screen and (max-width: $tablet) {
+  @media screen and (max-width: #{$tablet - 1px}) {
     width: 100%;
     height: 100vh;
     background: $nav-bg;
@@ -182,11 +182,12 @@ nav {
 
   .toggler {
     width: 100%;
+    height: $toggler-height;
     display: flex;
     background: $nav-toggler-bg;
     font-size: 1.5em;
     cursor: pointer;
-    padding: 0.6em;
+    padding: 0.4em;
     align-items: center;
     box-shadow: $nav-toggler-shadow;
   }
@@ -199,7 +200,7 @@ nav {
       margin-left: 1em;
     }
 
-    @media screen and (max-width: $tablet) {
+    @media screen and (max-width: #{$tablet - 1px}) {
       text-align: right;
       margin-right: 0.25em;
       flex-grow: 1;
@@ -248,7 +249,7 @@ nav {
       }
     }
 
-    @media screen and (max-width: $tablet) {
+    @media screen and (max-width: #{$tablet - 1px}) {
       height: auto;
     }
 
@@ -262,10 +263,14 @@ nav {
 
     .toggler {
       height: $toggler-height;
-      background: none;
       text-align: center;
-      padding: 0.4em;
       box-shadow: none;
+      background: $nav-toggler-collapsed-bg;
+
+      @media screen and (max-width: #{$tablet - 1px}) {
+        background: $nav-toggler-collapsed-mobile-bg;
+        color: $nav-toggler-collapsed-mobile-fg;
+      }
     }
 
     .footer {
@@ -275,7 +280,7 @@ nav {
       margin-bottom: .5em;
     }
 
-    @media screen and (max-width: $tablet) {
+    @media screen and (max-width: #{$tablet - 1px}) {
       .footer {
         display: none;
       }
@@ -289,7 +294,7 @@ nav {
       overflow: hidden;
 
       &.plugins {
-        @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
+        @media screen and (min-width: $tablet) and (max-width: #{$desktop - 1px}) {
           margin: 2em 0;
         }
       }
@@ -321,7 +326,7 @@ nav {
           margin-right: 0;
         }
 
-        @media screen and (max-width: $tablet) {
+        @media screen and (max-width: #{$tablet - 1px}) {
           display: none;
         }
       }
diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss
index fa83829a..d8d73bbe 100644
--- a/platypush/backend/http/webapp/src/style/themes/light.scss
+++ b/platypush/backend/http/webapp/src/style/themes/light.scss
@@ -89,6 +89,9 @@ $disabled-fg: rgb(155, 155, 155);
 $nav-bg: white !default;
 $nav-fg: #5a5e5b !default;
 $nav-toggler-bg: rgb(235, 235, 235) !default;
+$nav-toggler-collapsed-bg: $nav-bg !default;
+$nav-toggler-collapsed-mobile-bg: #3c3c3c !default;
+$nav-toggler-collapsed-mobile-fg: white !default;
 $nav-toggler-shadow: 0 0 1px 2px #c9cdca !default;
 $nav-footer-bg: rgb(240, 240, 240) !default;
 $nav-entry-selected-bg: $selected-bg !default;