From 6699f8389fad971a8150da30b2f44f0641a6bf79 Mon Sep 17 00:00:00 2001
From: mkz212 <82271669+mkz212@users.noreply.github.com>
Date: Mon, 20 Nov 2023 21:25:30 +0100
Subject: [PATCH 1/3] Fix logo when collapsed (#1765)

---
 ui/src/app/shared/layout/layout.component.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/ui/src/app/shared/layout/layout.component.scss b/ui/src/app/shared/layout/layout.component.scss
index 9c39e10f3..2926a391d 100644
--- a/ui/src/app/shared/layout/layout.component.scss
+++ b/ui/src/app/shared/layout/layout.component.scss
@@ -1,8 +1,3 @@
-@media (min-width: 992px) {
-  .body-top-padding {
-    padding-top: 0px !important;
-  }
-}
 
 /* MOBILE NAVBAR */
 
@@ -95,7 +90,6 @@
   background: #0f0f0f;
   z-index: 100;
   transition: all 0.5s ease;
-  overflow: hidden;
 }
 .sidebar.show{
   width: 78px;
@@ -124,11 +118,13 @@
   font-weight: 600;
   transition: 0.3s ease;
   transition-delay: 0.1s;
+  display: inline-block;
 }
 .sidebar.show .logo-details .logo_name{
   transition-delay: 0s;
   opacity: 0;
   pointer-events: none;
+  display: none;
 }
 .sidebar .nav-links{
   height: 100%;

From e9a268e257b78d82f11818acd9638a6f87455a7e Mon Sep 17 00:00:00 2001
From: mkz212 <82271669+mkz212@users.noreply.github.com>
Date: Mon, 20 Nov 2023 22:29:43 +0100
Subject: [PATCH 2/3] Sidebar themes - light and dark (#1769)

---
 ui/src/app/shared/layout/layout.component.scss | 12 +-----------
 ui/src/scss/themes/themes-dark.scss            | 18 ++++++++++++++++++
 ui/src/scss/themes/themes-light.scss           | 18 ++++++++++++++++++
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/ui/src/app/shared/layout/layout.component.scss b/ui/src/app/shared/layout/layout.component.scss
index 2926a391d..56915807a 100644
--- a/ui/src/app/shared/layout/layout.component.scss
+++ b/ui/src/app/shared/layout/layout.component.scss
@@ -87,7 +87,6 @@
   left: 0;
   height: 100%;
   width: 260px;
-  background: #0f0f0f;
   z-index: 100;
   transition: all 0.5s ease;
 }
@@ -106,7 +105,6 @@
 }
 .sidebar .logo-details i, .sidebar .logo-details img {
   font-size: 30px;
-  color: #fff;
   height: 50px;
   min-width: 78px;
   text-align: center;
@@ -114,7 +112,6 @@
 }
 .sidebar .logo-details .logo_name{
   font-size: 22px;
-  color: #fff;
   font-weight: 600;
   transition: 0.3s ease;
   transition-delay: 0.1s;
@@ -142,9 +139,7 @@
   list-style: none;
   transition: all 0.4s ease;
 }
-.sidebar .nav-links li:hover{
-  background: #333333;
-}
+
 .sidebar .nav-links li .iocn-link{
   display: flex;
   align-items: center;
@@ -158,7 +153,6 @@
   min-width: 78px;
   text-align: center;
   line-height: 50px;
-  color: #fff;
   font-size: 20px;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -177,7 +171,6 @@
 .sidebar .nav-links li a .link_name{
   font-size: 18px;
   font-weight: 400;
-  color: #fff;
   transition: all 0.4s ease;
 }
 .sidebar.show .nav-links li a .link_name{
@@ -187,7 +180,6 @@
 .sidebar .nav-links li .sub-menu{
   padding: 6px 6px 14px 80px;
   margin-top: -10px;
-  background: #333333;
   display: none;
   transition: all 0.3s ease;
 }
@@ -195,7 +187,6 @@
   display: block;
 }
 .sidebar .nav-links li .sub-menu a{
-  color: #fff;
   font-size: 15px;
   padding: 5px 0;
   white-space: nowrap;
@@ -251,7 +242,6 @@
 }
 
 .li-link1.show, .li-link2.show {
-  background: #333333;
   transition: 0s;
 }
 
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 7beb1e629..a6ef470e4 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -19,6 +19,24 @@
       border-bottom-width: 1px;
     }
 
+    .sidebar {
+      background-color: #0f0f0f;
+    }
+
+    .sidebar .nav-links li:hover,
+    .sidebar .nav-links li .sub-menu,
+    .li-link1.show, .li-link2.show {
+      background: #2b2b2b;
+    }
+    
+    .sidebar .logo-details i, .sidebar .logo-details img,
+    .sidebar .logo-details .logo_name,
+    .sidebar .nav-links li i,
+    .sidebar .nav-links li a .link_name,
+    .sidebar .nav-links li .sub-menu a {
+      color: #ffffff;
+    }
+
     .dropdown-menu {
       background-color: #222222;
     }
diff --git a/ui/src/scss/themes/themes-light.scss b/ui/src/scss/themes/themes-light.scss
index 575d3e217..9a06fb773 100644
--- a/ui/src/scss/themes/themes-light.scss
+++ b/ui/src/scss/themes/themes-light.scss
@@ -6,6 +6,24 @@
       background-color: $primary-dark !important;
     }
 
+    .sidebar {
+      background-color: #ffffff;
+    }
+
+    .sidebar .nav-links li:hover,
+    .sidebar .nav-links li .sub-menu,
+    .li-link1.show, .li-link2.show {
+      background: #cccccc;
+    }
+    
+    .sidebar .logo-details i, .sidebar .logo-details img,
+    .sidebar .logo-details .logo_name,
+    .sidebar .nav-links li i,
+    .sidebar .nav-links li a .link_name,
+    .sidebar .nav-links li .sub-menu a {
+      color: #333333;
+    }
+
     .primary-text {
       color: $primary;
     }

From cf70b42f7d7703b2d2e0fee0556f90fd5b4f0b3c Mon Sep 17 00:00:00 2001
From: mkz212 <82271669+mkz212@users.noreply.github.com>
Date: Mon, 20 Nov 2023 23:22:14 +0100
Subject: [PATCH 3/3] fix menu hamburger  (#1766)

Co-authored-by: Donavan Becker <beckersmarthome@icloud.com>
---
 ui/src/app/shared/layout/layout.component.html | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/ui/src/app/shared/layout/layout.component.html b/ui/src/app/shared/layout/layout.component.html
index aa2eea95e..58efe9b5c 100644
--- a/ui/src/app/shared/layout/layout.component.html
+++ b/ui/src/app/shared/layout/layout.component.html
@@ -15,16 +15,13 @@
       <ul class="navbar-nav mr-auto">
         <li class="nav-item waves-effect waves-light" routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}">
-          <a class="nav-link" routerLink="/" [translate]="'menu.label_status'"
-            data-toggle="collapse" data-target=".navbar-toggler">Status</a>
+          <a class="nav-link" routerLink="/" [translate]="'menu.label_status'">Status</a>
         </li>
         <li class="nav-item waves-effect waves-light" routerLinkActive="active" *ngIf="$auth.user.admin">
-          <a class="nav-link" routerLink="/plugins" [translate]="'menu.label_plugins'"
-            data-toggle="collapse" data-target=".navbar-toggler">Plugins</a>
+          <a class="nav-link" routerLink="/plugins" [translate]="'menu.label_plugins'">Plugins</a>
         </li>
         <li class="nav-item waves-effect waves-light" routerLinkActive="active" *ngIf="$auth.user.admin">
-          <a class="nav-link" routerLink="/config" [translate]="'menu.label_config'"
-            data-toggle="collapse" data-target=".navbar-toggler">Config</a>
+          <a class="nav-link" routerLink="/config" [translate]="'menu.label_config'">Config</a>
         </li>
         <li class="nav-item waves-effect waves-light" routerLinkActive="active" *ngIf="$settings.env.enableAccessories">
           <a class="nav-link" routerLink="/accessories" [translate]="'menu.label_accessories'">Accessories</a>