[Monitor Dashboard | Trunk]: Add scroll on menu section for small height. Change header css, need to test

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57902 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app.component.html

@@ -4,14 +4,12 @@
     <img class="badge small-badge right-badge"
          src="assets/theme-assets/prototype_flag.svg"
          alt="BETA">
-<!--    uk-light-->
-    <div class="">
-      <nav class="uk-navbar">
+      <nav class="uk-navbar uk-light">
         <a *ngIf="hasSidebar" id="sidebar_main_toggle" (click)="toggleOpen()" class="sSwitch sSwitch_left">
           <span class="sSwitchIcon"></span>
         </a>
         <div class="uk-navbar-right">
-          <ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
+          <ul class="uk-navbar-nav user_actions">
             <li>
               <user-mini *ngIf="properties"
                          [user]="user" [dashboard]="true" [colors]="'light'"
@@ -23,7 +21,6 @@
           </ul>
         </div>
       </nav>
-    </div>
   </div>
   <router-outlet></router-outlet>
 </div>

src/assets/theme-assets/dashboard-custom.css

@@ -25,11 +25,21 @@ html .dashboard {
 }
 
 /* Custom height of header, change var: header-height*/
+.dashboard #sidebar_main {
+  display: flex;
+  flex-direction: column;
+}
+
 .dashboard #sidebar_main .sidebar_main_header {
   height: auto;
   min-height: var(--header-height);
 }
 
+.dashboard #sidebar_main .menu_section {
+  overflow: auto;
+  flex: 1;
+}
+
 .dashboard .header_full #sidebar_main .sidebar_main_header {
   min-height: auto;
 }
@@ -69,13 +79,11 @@ body.dashboard {
 
 .dashboard #header_main > nav {
   height: var(--header-height);
-  display: table;
+  line-height: var(--header-height);
 }
 
 .dashboard #header_main > nav > * {
-  display: table-cell;
   vertical-align: middle;
-  float: none;
   line-height: inherit;
 }