From 8fe78408f609d1daedb98cfcfd00fa9002aec282 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 25 Jan 2023 07:59:30 +0200
Subject: [PATCH] Add style for sidebar toggle

---
 less/dashboard.less | 255 ++++++++++++++++++++++++++++++--------------
 1 file changed, 175 insertions(+), 80 deletions(-)

diff --git a/less/dashboard.less b/less/dashboard.less
index ddf985b..d82681a 100644
--- a/less/dashboard.less
+++ b/less/dashboard.less
@@ -10,8 +10,19 @@
 @dashboard-sidebar-border-width: @global-border-width;
 @dashboard-sidebar-border: @global-border;
 @dashboard-sidebar-width: 280px;
-@dashboard-sidebar-mini-width: 125px;
-@dashboard-sidebar-mini-width-s: 100px;
+@dashboard-sidebar-mini-width: 100px;
+
+@dashboard-sidebar-toggle-box-shadow: @global-default-shadow;
+@dashboard-sidebar-toggle-border: @global-border;
+@dashboard-sidebar-toggle-border-hover: @global-secondary-background;
+@dashboard-sidebar-toggle-border-radius: 500px;
+@dashboard-sidebar-toggle-border-width: @global-border-width;
+@dashboard-sidebar-toggle-background: @global-inverse-color;
+@dashboard-sidebar-toggle-background-hover: @global-secondary-background;
+@dashboard-sidebar-toggle-color: @global-color;
+@dashboard-sidebar-toggle-color-hover: @global-inverse-color;
+@dashboard-sidebar-toggle-size: @icon-button-small-size;
+@dashboard-sidebar-toggle-top: calc(@dashboard-header-height + 35px);
 
 @dashboard-menu-section-margin: 10px;
 @dashboard-menu-section-font-size: @global-small-font-size;
@@ -51,8 +62,46 @@
 @dashboard-elements: #page_content .message, bottom > div;
 
 .sidebar_main_swipe {
-
   #sidebar_main {
+    #sidebar_toggle {
+      position: fixed;
+      z-index: @dashboard-z-index + 1;
+      top: @dashboard-sidebar-toggle-top;
+      left: @dashboard-sidebar-width;
+      width: @dashboard-sidebar-toggle-size;
+      height: @dashboard-sidebar-toggle-size;
+      transition: left 0.5s linear;
+      -webkit-transition: left 0.5s linear;
+      -moz-transition: left 0.5s linear;
+      -o-transition: left 0.5s linear;
+      transform: translate(-50%, -50%);
+      box-shadow: @dashboard-sidebar-toggle-box-shadow;
+      border-radius: @dashboard-sidebar-toggle-border-radius;
+      border: @dashboard-sidebar-toggle-border-width solid @dashboard-sidebar-toggle-border;
+      background: @dashboard-sidebar-toggle-background;
+      color: @dashboard-sidebar-toggle-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      &::before {
+        content: '\e5cb';
+        font-family: "Material Icons";
+        font-size: @dashboard-sidebar-toggle-size - 15px;
+        transition: transform 0.5s linear;
+        -webkit-transition: transform 0.5s linear;
+        -moz-transition: transform 0.5s linear;
+        -o-transition: transform 0.5s linear;
+      }
+
+      &:hover {
+        background: @dashboard-sidebar-toggle-background-hover;
+        color: @dashboard-sidebar-toggle-color-hover;
+        border-color: @dashboard-sidebar-toggle-border-hover;
+      }
+    }
+
     #sidebar_content {
       width: @dashboard-sidebar-width;
       position: fixed;
@@ -63,96 +112,98 @@
       z-index: @dashboard-z-index;
       background: @dashboard-sidebar-background;
       border-right: @dashboard-sidebar-border-width solid @dashboard-sidebar-border;
-      transition: 0.5s;
-      transition-property: width;
+      transition: width 0.5s linear;
+      -webkit-transition: width 0.5s linear;
+      -moz-transition: width 0.5s linear;
+      -o-transition: width 0.5s linear;
       overflow-y: auto;
-    }
 
-    .menu_section {
-      margin-left: @dashboard-menu-section-margin;
-      position: relative;
-      font-size: @dashboard-menu-section-font-size;
+      & .menu_section {
+        margin-left: @dashboard-menu-section-margin;
+        position: relative;
+        font-size: @dashboard-menu-section-font-size;
 
-      & > ul > li {
+        & > ul > li {
 
-        & > a {
-          position: relative;
-          padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
-          line-height: @dashboard-menu-section-item-line-height;
-
-          &:not(.uk-flex) {
-            display: block;
-          }
-
-          & .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 {
           & > a {
-            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;
-              right: (@dashboard-menu-section-item-padding-horizontal/2);
-              top: 50%;
-              transform: translate(-50%, -50%);
-              line-height: (@dashboard-menu-section-item-line-height - 10px);
-            }
-          }
-
-          & .uk-nav-sub {
-            margin-right: @dashboard-menu-section-sublist-margin-right;
-            padding-left: @dashboard-menu-section-sublist-padding-left;
             position: relative;
+            padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
+            line-height: @dashboard-menu-section-item-line-height;
 
-            & a {
-              border-radius: @dashboard-menu-section-sublist-item-border-radius;
-              padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal;
+            &:not(.uk-flex) {
+              display: block;
             }
 
-            & > 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 {
-              left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding;
-              border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border;
+            & .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 {
+            & > a {
+              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;
 
-        &:hover:not(.uk-active) > a {
-          color: @dashboard-menu-section-item-color-hover;
+              &::after {
+                color: @dashboard-menu-section-item-parent-icon-color;
+              }
 
-          & .menu-icon {
+              &:not(.uk-flex)::after {
+                position: absolute;
+                right: (@dashboard-menu-section-item-padding-horizontal/2);
+                top: 50%;
+                transform: translate(-50%, -50%);
+                line-height: (@dashboard-menu-section-item-line-height - 10px);
+              }
+            }
+
+            & .uk-nav-sub {
+              margin-right: @dashboard-menu-section-sublist-margin-right;
+              padding-left: @dashboard-menu-section-sublist-padding-left;
+              position: relative;
+
+              & a {
+                border-radius: @dashboard-menu-section-sublist-item-border-radius;
+                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 {
+                left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding;
+                border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border;
+              }
+            }
+
+          }
+
+          &:hover:not(.uk-active) > a {
             color: @dashboard-menu-section-item-color-hover;
+
+            & .menu-icon {
+              color: @dashboard-menu-section-item-color-hover;
+            }
           }
-        }
 
-        &.uk-active > a {
-          color: @dashboard-menu-section-item-color-active;
+          &.uk-active > a {
+            color: @dashboard-menu-section-item-color-active;
 
-          & .menu-icon {
-            background-color: @dashboard-primary-background;
-            background-image: @dashboard-primary-gradient;
-            color: @dashboard-primary-inverse-color;
+            & .menu-icon {
+              background-color: @dashboard-primary-background;
+              background-image: @dashboard-primary-gradient;
+              color: @dashboard-primary-inverse-color;
+            }
           }
         }
       }
@@ -161,7 +212,10 @@
 
   @{dashboard-pages}, @{dashboard-elements} {
     padding-left: @dashboard-sidebar-width;
-    transition: 0.5s;
+    transition: padding-left 0.5s linear;
+    -webkit-transition: padding-left 0.5s linear;
+    -moz-transition: padding-left 0.5s linear;
+    -o-transition: padding-left 0.5s linear;
   }
 
   #page_content {
@@ -245,8 +299,49 @@
 
   /* Mini Sidebar*/
   &.sidebar_mini {
-    #sidebar_main #sidebar_content {
-      width: @dashboard-sidebar-mini-width;
+
+    &:not(.sidebar_hover) {
+      #sidebar_toggle {
+        left: @dashboard-sidebar-mini-width !important;
+      }
+
+      #sidebar_main #sidebar_content {
+          width: @dashboard-sidebar-mini-width;
+
+          & .hide-on-close {
+            display: none;
+          }
+
+          .menu_section {
+
+            & > ul > li {
+              &.uk-parent {
+                & > a {
+                  padding-right: @dashboard-menu-section-item-padding-horizontal !important;
+
+                  &::after {
+                    content: none;
+                  }
+                }
+
+                & .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 {
+      transform: rotate(180deg);
     }
 
     @{dashboard-pages}, @{dashboard-elements} {
@@ -256,11 +351,11 @@
 
   @media (max-width: @breakpoint-small - 1px) {
     #sidebar_main #sidebar_content {
-      width: @dashboard-sidebar-mini-width-s !important;
+      width: @dashboard-sidebar-mini-width !important;
     }
 
     @{dashboard-pages}, @{dashboard-elements} {
-      padding-left: @dashboard-sidebar-mini-width-s !important;
+      padding-left: @dashboard-sidebar-mini-width !important;
     }
 
     #page_content .message {