From 5fdc3eca7e9e0768d58a6e56eec66539689dbf45 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 17 Jan 2025 18:21:54 +0100
Subject: [PATCH] Fix small issues with the sidebar

---
 dashboard/index.html     |  4 ++--
 dashboard/src/theme.scss | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index c27c8ec95..85a4a3145 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -149,8 +149,8 @@
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/branding')}" ng-show="user.isAtLeastAdmin" href="#/branding" ng-click="closeNavbar()"><i class="fa fa-passport fa-fw"></i> {{ 'branding.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/domains')}" ng-show="user.isAtLeastAdmin" href="#/domains" ng-click="closeNavbar()"><i class="fa fa-globe fa-fw"></i> {{ 'domains.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/email')}" ng-show="user.isAtLeastMailManager" href="#/email" ng-click="closeNavbar()"><i class="fa fa-envelope fa-fw"></i> {{ 'emails.title' | tr }}</a>
-          <a class="nav-sidebar-item" ng-class="{ active: isActive('/eventlog`')}" ng-show="user.isAtLeastAdmin" href="#/eventlog" ng-click="closeNavbar()"><i class="fa fa-list-alt fa-fw"></i> {{ 'eventlog.title' | tr }}</a>
-          <a class="nav-sidebar-item" ng-class="{ active: isActive('/nework')}" ng-show="user.isAtLeastAdmin" href="#/network" ng-click="closeNavbar()"><i class="fas fa-network-wired fa-fw"></i> {{ 'network.title' | tr }}</a>
+          <a class="nav-sidebar-item" ng-class="{ active: isActive('/eventlog')}" ng-show="user.isAtLeastAdmin" href="#/eventlog" ng-click="closeNavbar()"><i class="fa fa-list-alt fa-fw"></i> {{ 'eventlog.title' | tr }}</a>
+          <a class="nav-sidebar-item" ng-class="{ active: isActive('/network')}" ng-show="user.isAtLeastAdmin" href="#/network" ng-click="closeNavbar()"><i class="fas fa-network-wired fa-fw"></i> {{ 'network.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/services')}" ng-show="user.isAtLeastAdmin" href="#/services" ng-click="closeNavbar()"><i class="fa fa-cogs fa-fw"></i> {{ 'services.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/settings')}" ng-show="user.isAtLeastAdmin" href="#/settings" ng-click="closeNavbar()"><i class="fa fa-wrench fa-fw"></i> {{ 'settings.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/user-directory')}" ng-show="user.isAtLeastAdmin" href="#/user-directory" ng-click="closeNavbar()"><i class="fa fa-users-gear fa-fw"></i> {{ 'users.title' | tr }}</a>
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index ab5e120e2..a12a2c345 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -389,8 +389,7 @@ html, body {
     position: relative;
     z-index: 1000;
     transition: all 250ms ease;
-    width: 250px;
-    min-width: 250px;
+    min-width: 280px;
     height: 100%;
     white-space: nowrap !important;
     overflow: hidden;
@@ -462,10 +461,16 @@ html, body {
 }
 
 .nav-sidebar-item:hover {
-    background-color: var(--pankow-color-background-hover);
+    background-color: #e9ecef;
     text-decoration: none;
 }
 
+@media (prefers-color-scheme: dark) {
+    .nav-sidebar-item:hover {
+        background-color: var(--card-background);
+    }
+}
+
 .nav-sidebar-item.active i ,
 .nav-sidebar-item:hover i {
     opacity: 1;