From bcceb8367e2e9c1bd480f54ff2822235c51c1650 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 4 Nov 2022 16:33:24 +0200
Subject: [PATCH] Make some modifications regarding sidebar menu and submenu

---
 less/dashboard.less | 40 ++++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/less/dashboard.less b/less/dashboard.less
index 3a167dc..7d81987 100644
--- a/less/dashboard.less
+++ b/less/dashboard.less
@@ -16,18 +16,25 @@
 @dashboard-menu-section-margin: 10px;
 @dashboard-menu-section-font-size: @global-small-font-size;
 @dashboard-menu-section-item-line-height: @global-control-small-height;
-@dashboard-menu-section-item-padding-vertical: 10px;
+@dashboard-menu-section-item-padding-vertical: 5px;
 @dashboard-menu-section-item-padding-horizontal: 20px;
+@dashboard-menu-section-item-parent-icon-color: @global-meta-color;
+@dashboard-menu-section-item-color-hover: @dashboard-primary-background;
 @dashboard-menu-section-icon-padding: 6px;
 @dashboard-menu-section-icon-border-radius: @global-border-radius;
-@dashboard-menu-section-sublist-padding-left: @nav-sublist-padding-left + 2*@dashboard-menu-section-icon-padding;
-@dashboard-menu-section-sublist-margin: 10px;
-@dashboard-menu-section-sublist-border-width: 2px;
+@dashboard-menu-section-icon-color: @global-meta-color;
+@dashboard-menu-section-sublist-padding-left: @nav-sublist-padding-left + @dashboard-menu-section-icon-padding;
+@dashboard-menu-section-sublist-margin-right: @dashboard-menu-section-item-padding-horizontal;
+@dashboard-menu-section-sublist-border-width: 3px;
+@dashboard-menu-section-sublist-border-radius: 40px;
 @dashboard-menu-section-sublist-border: fade(@dashboard-primary-background, 30%);
 @dashboard-menu-section-sublist-item-padding-vertical: 5px;
-@dashboard-menu-section-sublist-item-padding-horizontal: 10px;
+@dashboard-menu-section-sublist-item-padding-horizontal: 15px;
 @dashboard-menu-section-sublist-item-border-radius: @global-small-border-radius;
-@dashboard-menu-section-sublist-item-background-active: @dashboard-page-content-background;
+@dashboard-menu-section-sublist-item-background-hover: fade(@dashboard-primary-background, 10%);
+@dashboard-menu-section-sublist-item-color-hover: @dashboard-primary-background;
+@dashboard-menu-section-sublist-item-background-active: fade(@dashboard-primary-background, 10%);
+@dashboard-menu-section-sublist-item-color-active: @dashboard-primary-background;
 
 @dashboard-page-content-sticky-border-width: @global-border-width;
 @dashboard-page-content-sticky-border: @global-border;
@@ -78,12 +85,17 @@
             padding: @dashboard-menu-section-icon-padding;
             border-radius: @dashboard-menu-section-icon-border-radius;
             background-color: transparent;
+            color: @dashboard-menu-section-icon-color;
           }
         }
 
         &.uk-parent {
           & > a {
-            padding: @dashboard-menu-section-item-padding-vertical (2*@dashboard-menu-section-item-padding-horizontal) @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
+            padding: @dashboard-menu-section-item-padding-vertical (3*@dashboard-menu-section-item-padding-horizontal) @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
+
+            &::after {
+              color: @dashboard-menu-section-item-parent-icon-color;
+            }
 
             &:not(.uk-flex)::after {
               position: absolute;
@@ -95,7 +107,7 @@
           }
 
           & .uk-nav-sub {
-            margin-right: @dashboard-menu-section-sublist-margin;
+            margin-right: @dashboard-menu-section-sublist-margin-right;
             padding-left: @dashboard-menu-section-sublist-padding-left;
             position: relative;
 
@@ -104,23 +116,35 @@
               padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal;
             }
 
+            & > li:hover > a {
+              background-color: @dashboard-menu-section-sublist-item-background-hover;
+              color: @dashboard-menu-section-sublist-item-color-active;
+            }
+
             & > li.uk-active > a {
               background-color: @dashboard-menu-section-sublist-item-background-active;
+              color: @dashboard-menu-section-sublist-item-color-hover;
             }
 
             &:before {
               content: "";
               left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding;
+              top: 0;
               position: absolute;
               height: 95%;
               border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border;
+              border-radius: @dashboard-menu-section-sublist-border-radius;
             }
           }
 
         }
 
         &:hover:not(.uk-active) > a {
+          color: @dashboard-menu-section-item-color-hover;
 
+          & .menu-icon {
+            color: @dashboard-menu-section-item-color-hover;
+          }
         }
 
         &.uk-active > a {