Add toggle and hover behaviour in sidebar

src/app/app.component.html

@@ -3,7 +3,7 @@
 </div>
 <div *ngIf="!loading" [class.monitor]="isFrontPage">
   <div  class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu || hasInternalSidebar)"
-       [class.sidebar_mini]="!open &&  (hasSidebar || hasAdminMenu || hasInternalSidebar)">
+       [class.sidebar_mini]="!open &&  (hasSidebar || hasAdminMenu || hasInternalSidebar)" [class.sidebar_hover]="hover">
     <div id="modal-container"></div>
     <ng-container *ngIf="!isHidden">
       <navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader" [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user"></navbar>

src/app/app.component.ts

@@ -166,7 +166,6 @@ export class AppComponent implements OnInit, OnDestroy {
               this.subscriptions.push(this.stakeholderService.getStakeholder(params['stakeholder'], this.updateStakeholder).subscribe(stakeholder => {
                 if (stakeholder) {
                   this.stakeholder = stakeholder;
-                  console.log(this.stakeholder);
                   this.updateStakeholder = false;
                   LinksResolver.setProperties(this.stakeholder.alias);
                   this.setProperties(this.stakeholder.alias, this.stakeholder.type);
@@ -274,6 +273,10 @@ export class AppComponent implements OnInit, OnDestroy {
     return this.layoutService.open;
   }
   
+  public get hover() {
+    return this.layoutService.hover;
+  }
+  
   get isHidden() {
     return this.stakeholder && !this.hasPermission(this.view?this.view:this.stakeholder.visibility);
   }

src/app/app.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
-import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppComponent} from './app.component';
 import {OpenaireErrorPageComponent} from './error/errorPage.component';
@@ -22,7 +22,9 @@ import {DEFAULT_TIMEOUT, TimeoutInterceptor} from "./openaireLibrary/timeout-int
 import {ErrorInterceptorService} from "./openaireLibrary/error-interceptor.service";
 import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
 import {AdminDashboardGuard} from "./utils/adminDashboard.guard";
-import {NotificationsSidebarModule} from "./openaireLibrary/notifications/notifications-sidebar/notifications-sidebar.module";
+import {
+  NotificationsSidebarModule
+} from "./openaireLibrary/notifications/notifications-sidebar/notifications-sidebar.module";
 import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
 import {IconsModule} from "./openaireLibrary/utils/icons/icons.module";
 import {IconsService} from "./openaireLibrary/utils/icons/icons.service";
@@ -42,7 +44,6 @@ import {incognito} from "./openaireLibrary/utils/icons/icons";
     CookieLawModule,
     BrowserModule.withServerTransition({appId: 'serverApp'}),
     AppRoutingModule,
-    BrowserTransferStateModule,
     SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule
   ],
   declarations: [AppComponent, OpenaireErrorPageComponent],

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 53400f774505b7461ba5773f3d2d40cfc7091e34
+Subproject commit 9f4be4b29b98118e62dbd6ed6b8cd2b8a3e98b90

src/app/topic/topic.component.html

@@ -1,13 +1,12 @@
 <aside *ngIf="stakeholder" id="sidebar_main">
-  <div id="sidebar_content">
+  <div sidebar-content>
     <div class="menu_section uk-margin-large-top">
       <a [routerLink]="'/admin/' + stakeholder.alias" class="uk-button uk-button-link uk-margin-left">
         <h6 class="uk-flex uk-flex-middle uk-flex-center uk-margin-remove-bottom">
           <div class="uk-width-auto">
             <icon class="menu-icon" name="west" [flex]="true" ratio="1.5"></icon>
           </div>
-          <span class="uk-width-expand uk-text-truncate uk-margin-small-left"
-                [class.uk-hidden]="!open">Indicators</span>
+          <span class="uk-width-expand uk-text-truncate uk-margin-small-left hide-on-close">Indicators</span>
         </h6>
       </a>
     </div>
@@ -16,15 +15,15 @@
         <li *ngFor="let topic of stakeholder.topics; let i=index" class="uk-parent" [class.uk-active]="topicIndex === i" transition-group-item>
           <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
              [title]="topic.name" class="uk-visible-toggle">
-            <span class="uk-flex uk-flex-middle uk-flex-center">
+            <span class="uk-flex uk-flex-middle">
               <div *ngIf="topic.icon" class="uk-width-auto">
                 <icon class="menu-icon" [svg]="topic.icon" ratio="0.9" [flex]="true"></icon>
               </div>
-              <span *ngIf="open || !topic.icon" [class.uk-text-small]="!open"
+              <span [class.hide-on-close]="topic.icon"
                     class="uk-width-expand uk-text-truncate uk-margin-small-left">
                 {{topic.name}}
               </span>
-              <span *ngIf="open" class="uk-margin-xsmall-left" [class.uk-invisible-hover]="topicIndex !== i"
+              <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="topicIndex !== i"
                     (click)="$event.stopPropagation();$event.preventDefault()">
                 <a class="uk-link-reset uk-flex uk-flex-middle">
                   <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
@@ -94,11 +93,11 @@
             </span>
           </a>
           <ul *ngIf="isBrowser || topicIndex === i" class="uk-nav-sub" [id]="'categories-' + i.toString()" transition-group>
-            <li *ngFor="let category of topic.categories; let j=index"  transition-group-item  class="uk-visible-toggle" [class.uk-active]="categoryIndex == j">
+            <li *ngFor="let category of topic.categories; let j=index" transition-group-item  class="uk-visible-toggle" [class.uk-active]="categoryIndex == j">
               <a (click)="chooseCategory(j)" [title]="category.name">
-                <div class="uk-flex uk-flex-middle uk-flex-center uk-width-1-1">
+                <div class="uk-flex uk-flex-middle uk-width-1-1">
                   <span class="uk-width-expand uk-text-truncate">{{category.name}}</span>
-                  <span *ngIf="open" class="uk-margin-xsmall-left" [class.uk-invisible-hover]="categoryIndex !== j"
+                  <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="categoryIndex !== j"
                             (click)="$event.stopPropagation();$event.preventDefault()">
                     <a class="uk-link-reset uk-flex uk-flex-middle">
                       <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
@@ -167,18 +166,18 @@
             <li *ngIf="isCurator">
               <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
                 <icon name="add" [flex]="true"></icon>
-                <span>Create new category</span>
+                <span class="hide-on-close">Create new category</span>
               </a>
             </li>
           </ul>
         </li>
-        <li *ngIf="isCurator">
+        <li *ngIf="isCurator" class="hide-on-close">
           <a (click)="editTopicOpen(-1); $event.preventDefault()">
             <div class="uk-flex uk-flex-middle uk-flex-center">
               <div class="uk-width-auto">
                 <icon class="menu-icon" name="add" [flex]="true"></icon>
               </div>
-              <span class="uk-width-expand uk-text-truncate uk-margin-small-left" [class.uk-hidden]="!open">Create new topic</span>
+              <span class="uk-width-expand uk-text-truncate uk-margin-small-left hide-on-close">Create new topic</span>
             </div>
           </a>
         </li>

src/app/topic/topic.module.ts

@@ -21,11 +21,12 @@ import {NotifyFormModule} from "../openaireLibrary/notifications/notify-form/not
 import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
 import {TransitionGroupModule} from "../openaireLibrary/utils/transition-group/transition-group.module";
 import {NumberRoundModule} from "../openaireLibrary/utils/pipes/number-round.module";
+import {SideBarModule} from "../openaireLibrary/dashboard/sharedComponents/sidebar/sideBar.module";
 
 @NgModule({
   imports: [
     CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
-    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule
+    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule, SideBarModule
   ],
   declarations: [
     TopicComponent, IndicatorsComponent

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit cd44ace5d067999ed6d852f20204d5a05385580b
+Subproject commit 8fe78408f609d1daedb98cfcfd00fa9002aec282