Bottom: Fix shortView. Sidebar: Add toggle and hover behaviour.

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -17,6 +17,11 @@ export class LayoutService {
    */
   private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   
+  /**
+   * Set this to true when sidebar is hovered, otherwise false.
+   */
+  private hoverSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  
   /**
    *  Add hasSidebar: false on data of route config, if sidebar is not needed.
    */
@@ -164,6 +169,14 @@ export class LayoutService {
     this.openSubject.next(value);
   }
   
+  get hover(): boolean {
+    return this.hoverSubject.getValue();
+  }
+  
+  setHover(value: boolean) {
+    this.hoverSubject.next(value);
+  }
+  
   get hasSidebar(): Observable<boolean> {
     return this.hasSidebarSubject.asObservable();
   }

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -1,5 +1,5 @@
 <aside id="sidebar_main">
-  <div id="sidebar_content">
+  <div sidebar-content>
     <div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" style="min-height: 30vh">
       <ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 400">
         <ng-template ngFor [ngForOf]="items" let-item>
@@ -7,12 +7,11 @@
               [class.uk-parent]="item.items.length > 0">
             <a [routerLink]="getItemRoute(item)" [title]="item.title"
                [queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null">
-              <div class="uk-flex uk-flex-middle uk-flex-center">
+              <div class="uk-flex uk-flex-middle">
                 <div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
                   <icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
                 </div>
-                <span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
-                <span *ngIf="item.items?.length > 0"></span>
+                <span [class.hide-on-close]="item.icon" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
               </div>
             </a>
             <ul *ngIf="item.items?.length > 0 && (isBrowser || isTheActiveMenuItem(item))" class="uk-nav-sub">
@@ -37,7 +36,8 @@
                 <div *ngIf="specialMenuItem.icon" class="uk-width-auto">
                   <icon class="menu-icon" [customClass]="specialMenuItem.icon.class"  [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
                 </div>
-                <span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
+                <span class="uk-width-expand uk-text-truncate uk-margin-small-left"
+                      [class.hide-on-close]="specialMenuItem.icon">{{specialMenuItem.title}}</span>
               </div>
             </a>
           </li>

dashboard/sharedComponents/sidebar/sideBar.component.ts

@@ -85,9 +85,4 @@ export class SideBarComponent implements AfterViewInit {
   public get open() {
     return this.layoutService.open;
   }
-  
-  public toggleOpen(event: MouseEvent) {
-    event.preventDefault();
-    this.layoutService.setOpen(!this.open);
-  }
 }

dashboard/sharedComponents/sidebar/sideBar.module.ts

@@ -6,6 +6,7 @@ import {RouterModule} from "@angular/router";
 import {SideBarComponent} from './sideBar.component';
 import {UrlPrefixModule} from "../../../utils/pipes/url-prefix.module";
 import {IconsModule} from "../../../utils/icons/icons.module";
+import {SidebarContentComponent} from "./sidebar-content.component";
 
 @NgModule({
   imports: [
@@ -15,11 +16,13 @@ import {IconsModule} from "../../../utils/icons/icons.module";
     IconsModule
   ],
   declarations: [
-    SideBarComponent
+    SideBarComponent,
+    SidebarContentComponent
   ],
   providers: [],
   exports: [
-    SideBarComponent
+    SideBarComponent,
+    SidebarContentComponent
   ]
 })
 export class SideBarModule {

dashboard/sharedComponents/sidebar/sidebar-content.component.ts

@@ -0,0 +1,29 @@
+import {Component, HostListener} from "@angular/core";
+import {LayoutService} from "./layout.service";
+
+@Component({
+  selector: '[sidebar-content]',
+  template: `
+    <div id="sidebar_toggle" (click)="toggleOpen()"></div>
+    <div id="sidebar_content" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
+      <ng-content></ng-content>
+    </div>
+  `
+})
+export class SidebarContentComponent {
+  
+  constructor(private layoutService: LayoutService) {
+  }
+
+  onMouseEnter() {
+    this.layoutService.setHover(true);
+  }
+
+  onMouseLeave() {
+    this.layoutService.setHover(false);
+  }
+
+  public toggleOpen() {
+    this.layoutService.setOpen(!this.layoutService.open);
+  }
+}

sharedComponents/bottom.component.html

@@ -11,38 +11,40 @@
   </div>
 </ng-template>
 <ng-container *ngIf="shortView;else longView">
-  <div *ngIf="properties.footerGrantText || (divContents && divContents['footer']?.length > 0)"
-       class="uk-padding uk-flex uk-flex-middle">
-    <div *ngIf="showCommision" class="uk-width-1-2 uk-margin-left">
-      <div class="uk-flex uk-flex-middle@m uk-flex-top">
-        <div>
-          <img style="max-width: 42px;"
-               [src]="assetsPath + 'common/commission.jpg'"
-               alt="flag black white low" width="50px" loading="lazy">
-        </div>
-        <div class="uk-margin-left">
-          <helper *ngIf="divContents && divContents['footer']?.length > 0"
-                  [texts]="divContents['footer']"></helper>
-          <div class="uk-visible@m">
-            <div *ngIf="properties.footerGrantText" class="">
-              <span style="font-size: 12px; line-height: 0.7!important;"
-                    [innerHtml]="properties.footerGrantText"></span>
-            </div>
+  <div [ngClass]="background">
+    <div *ngIf="properties.footerGrantText || (divContents && divContents['footer']?.length > 0)"
+         class="uk-padding-small uk-flex uk-flex-middle uk-flex-between">
+      <div *ngIf="showCommision" class="uk-width-expand">
+        <div class="uk-flex uk-flex-middle@m uk-flex-top">
+          <div>
+            <img style="max-width: 42px;"
+                 [src]="assetsPath + 'common/commission.jpg'"
+                 alt="flag black white low" width="50px" loading="lazy">
           </div>
-          <div class="uk-text-center uk-hidden@m">
-            <div *ngIf="properties.footerGrantText" class="">
+          <div class="uk-margin-left">
+            <helper *ngIf="divContents && divContents['footer']?.length > 0"
+                    [texts]="divContents['footer']"></helper>
+            <div class="uk-visible@m">
+              <div *ngIf="properties.footerGrantText" class="">
               <span style="font-size: 12px; line-height: 0.7!important;"
                     [innerHtml]="properties.footerGrantText"></span>
+              </div>
+            </div>
+            <div class="uk-text-center uk-hidden@m">
+              <div *ngIf="properties.footerGrantText" class="">
+              <span style="font-size: 12px; line-height: 0.7!important;"
+                    [innerHtml]="properties.footerGrantText"></span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div *ngIf="showOpenaire" class="uk-text-right uk-width-1-2">
-      <!-- <img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'" -->
-      <img [src]="assetsPath + 'common/Logo_Horizontal.png'"
-           width="140px"
-           height="50px" class="el-image" alt="OpenAIRE" loading="lazy">
+      <div *ngIf="showOpenaire" class="uk-width-1-2 uk-margin-left">
+        <!-- <img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'" -->
+        <img [src]="assetsPath + 'common/Logo_Horizontal.png'"
+             width="140px"
+             height="50px" class="el-image" alt="OpenAIRE" loading="lazy">
+      </div>
     </div>
   </div>
 </ng-container>