less/dashboard.less

@@ -33,8 +33,9 @@
 @dashboard-sidebar-toggle-size: @icon-button-small-size;
 @dashboard-sidebar-toggle-top: 50%;
 
+@dashboard-menu-section-font-size: @global-small-font-size;
+@dashboard-menu-section-line-height: 1.5 * @global-small-font-size;
 @dashboard-menu-section-margin: 10px;
-@dashboard-menu-section-item-line-height: @global-control-small-height;
 @dashboard-menu-section-item-padding-vertical: 5px;
 @dashboard-menu-section-item-padding-horizontal: 20px;
 @dashboard-menu-section-item-padding-horizontal-s: 30px;
@@ -85,7 +86,7 @@
 }
 
 .sidebar_mobile_toggle {
-  line-height: @dashboard-menu-section-item-line-height;
+  line-height: @dashboard-menu-section-line-height;
 
   & .menu-icon {
     background-color: @dashboard-primary-background;
@@ -102,7 +103,7 @@
     & > a {
       position: relative;
       padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
-      line-height: @dashboard-menu-section-item-line-height;
+      line-height: @dashboard-menu-section-line-height;
 
       &:not(.uk-flex) {
         display: block;
@@ -119,7 +120,7 @@
       & > a {
         padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
 
-        &::after {
+        .uk-nav-parent-icon::after {
           color: @dashboard-menu-section-item-parent-icon-color;
         }
 
@@ -128,7 +129,7 @@
           right: (@dashboard-menu-section-item-padding-horizontal/2);
           top: 50%;
           transform: translate(-50%, -50%);
-          line-height: (@dashboard-menu-section-item-line-height - 10px);
+          line-height: (@dashboard-menu-section-line-height - 10px);
         }
       }
 
@@ -203,8 +204,15 @@
     }
   }
 
-  &:not(.mobile) .uk-nav-default:extend(.uk-text-small) {
+  &:not(.mobile) .uk-nav-default {
+    font-size: @dashboard-menu-section-font-size;
+    line-height: @dashboard-menu-section-line-height;
     margin-left: @dashboard-menu-section-margin;
+
+    & .uk-nav-sub > li {
+      font-size: @dashboard-menu-section-font-size;
+      line-height: @dashboard-menu-section-line-height;
+    }
   }
 }
 
@@ -223,8 +231,11 @@
 
 .sidebar_main_swipe {
   #sidebar_main {
+    height: calc(100vh - @dashboard-header-height);
+    position: relative;
+
     #sidebar_toggle {
-      position: fixed;
+      position: absolute;
       z-index: @dashboard-z-index + 1;
       top: @dashboard-sidebar-toggle-top;
       left: @dashboard-sidebar-width;
@@ -264,14 +275,14 @@
 
     #sidebar_content {
       width: @dashboard-sidebar-width;
-      position: fixed;
+      position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
-      padding-top: @dashboard-header-height;
       z-index: @dashboard-z-index;
       background: @dashboard-sidebar-background;
-      border-right: @dashboard-sidebar-border-width solid @dashboard-sidebar-border;
+      border: @dashboard-sidebar-border-width solid @dashboard-sidebar-border;
+      border-left: none;
       transition: width @dashboard-transition-delay linear;
       -webkit-transition: width @dashboard-transition-delay linear;
       -moz-transition: width @dashboard-transition-delay linear;
@@ -281,6 +292,8 @@
   }
 
   @{dashboard-pages}, @{dashboard-elements} {
+    width: 100%;
+    box-sizing: border-box;
     padding-left: @dashboard-sidebar-width;
     transition: padding-left @dashboard-transition-delay linear;
     -webkit-transition: padding-left @dashboard-transition-delay linear;

library-css/material.scss

@@ -1,21 +1,57 @@
 @use '@angular/material' as mat;
-@use '@angular/material/theming';
 @include mat.core();
+
 $primary-color: (
         0: #211F7E,
         100: #211F7E,
+        200: #211F7E,
+        300: #211F7E,
+        400: #211F7E,
+        500: #211F7E,
+        600: #211F7E,
         700: #211F7E,
+        800: #211F7E,
+        900: #211F7E,
         contrast: (50: #ffffff)
 );
 $secondary-color: (
         0: #3086ED,
         100: #3086ED,
+        200: #3086ED,
+        300: #3086ED,
+        400: #3086ED,
+        500: #3086ED,
+        600: #3086ED,
         700: #3086ED,
+        800: #3086ED,
+        900: #3086ED,
         contrast: (50: #ffffff)
 );
-$my-app-primary: mat.define-palette($primary-color, 0);
-$my-app-accent:  mat.define-palette($secondary-color, 0);
-$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent);
+$warn-color: (
+        0: #BD640D,
+        100: #BD640D,
+        200: #BD640D,
+        300: #BD640D,
+        400: #BD640D,
+        500: #BD640D,
+        600: #BD640D,
+        700: #BD640D,
+        800: #BD640D,
+        900: #BD640D,
+        contrast: (50: #ffffff)
+);
+$my-app-primary: mat.define-palette($primary-color);
+$my-app-accent: mat.define-palette($secondary-color);
+$my-app-warn: mat.define-palette($warn-color);
+$my-app-theme: mat.define-light-theme((
+        color: (
+                primary: $my-app-primary,
+                accent: $my-app-accent,
+                warn: $my-app-warn
+        ),
+        typography: mat.define-typography-config(),
+        density: 0,
+));
 
 @include mat.all-component-themes($my-app-theme);