From 540ba93c0fc9a4be88b2102033fc18ee16ea8673 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 15 Feb 2023 11:49:04 +0200
Subject: [PATCH] Dashboard: Make menu_section independent and add rule for
 mobile view.

---
 less/dashboard.less | 77 ++++++++++++++++++++++++++-------------------
 1 file changed, 44 insertions(+), 33 deletions(-)

diff --git a/less/dashboard.less b/less/dashboard.less
index 9afd1d5..ee2c729 100644
--- a/less/dashboard.less
+++ b/less/dashboard.less
@@ -1,3 +1,5 @@
+@import (less) "~src/assets/openaire-theme/less/text.less";
+
 :root {
   --dashboard-sidebar-width: 280px;
   --dashboard-sidebar-mini-width: 100px;
@@ -32,7 +34,6 @@
 @dashboard-sidebar-toggle-top: calc(@dashboard-header-height + 35px);
 
 @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: 5px;
 @dashboard-menu-section-item-padding-horizontal: 20px;
@@ -68,10 +69,26 @@
 @dashboard-pages: #page_content, openaire-user  > user > div, openaire-error  > div;
 @dashboard-elements: #page_content .message, bottom > div;
 
+.menu-icon {
+  display: block;
+  padding: @dashboard-menu-section-icon-padding;
+  border-radius: @dashboard-menu-section-icon-border-radius;
+  background-color: transparent;
+  color: @dashboard-menu-section-icon-color;
+}
+
+.sidebar_mobile_toggle {
+  line-height: @dashboard-menu-section-item-line-height;
+
+  & .menu-icon {
+    background-color: @dashboard-primary-background;
+    background-image: @dashboard-primary-gradient;
+    color: @dashboard-primary-inverse-color;
+  }
+}
+
 .menu_section {
-  margin-left: @dashboard-menu-section-margin;
   position: relative;
-  font-size: @dashboard-menu-section-font-size;
 
   & > ul > li {
 
@@ -89,14 +106,6 @@
           flex: 1 !important;
         }
       }
-
-      & .menu-icon {
-        display: block;
-        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 {
@@ -163,8 +172,8 @@
     }
   }
 
-  &.mobile {
-
+  &:not(.mobile) .uk-nav-default:extend(.uk-text-small) {
+    margin-left: @dashboard-menu-section-margin;
   }
 }
 
@@ -303,6 +312,7 @@
   }
 
   /* No sidebar */
+
   &:not(.sidebar_main_active):not(.sidebar_mini) {
     @{dashboard-pages}, @{dashboard-elements} {
       padding-left: 0;
@@ -315,6 +325,7 @@
   }
 
   /* Mini Sidebar*/
+
   &.sidebar_mini {
 
     &:not(.sidebar_hover) {
@@ -323,34 +334,34 @@
       }
 
       #sidebar_main #sidebar_content {
-          width: @dashboard-sidebar-mini-width;
+        width: @dashboard-sidebar-mini-width;
 
-          & .hide-on-close {
-            display: none;
-          }
+        & .hide-on-close {
+          display: none;
+        }
 
-          .menu_section {
+        .menu_section {
 
-            & > ul > li {
-              &.uk-parent {
-                & > a::after {
-                    content: '';
-                }
+          & > ul > li {
+            &.uk-parent {
+              & > a::after {
+                content: '';
+              }
 
-                & .uk-nav-sub {
-                  & a, & * {
-                    width: 0 !important;
-                    min-width: 0 !important;
-                    padding-left: 0 !important;
-                    padding-right: 0 !important;
-                    margin-right: 0 !important;
-                    overflow: hidden;
-                  }
+              & .uk-nav-sub {
+                & a, & * {
+                  width: 0 !important;
+                  min-width: 0 !important;
+                  padding-left: 0 !important;
+                  padding-right: 0 !important;
+                  margin-right: 0 !important;
+                  overflow: hidden;
                 }
               }
             }
           }
         }
+      }
     }
 
     #sidebar_toggle::before {
@@ -362,7 +373,7 @@
     }
   }
 
-  @media (max-width: @breakpoint-small - 1px) {
+  @media (max-width: @breakpoint-small-max) {
     #sidebar_main #sidebar_content, #sidebar_toggle {
       display: none !important;
     }