From b970b9c302707067e63eee51675b59427dc5150a Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 4 Nov 2022 16:36:51 +0200
Subject: [PATCH] Add new sidebar in topics component (need to investigate
 about transition). Add hasInternalSidebar for topics component. Move
 categories under topics in monitor sidebar

---
 .../admin-stakeholder-routing.module.ts       |   7 +-
 src/app/app.component.html                    |   9 +-
 src/app/app.component.ts                      |  34 +-
 src/app/monitor/monitor.component.html        |  25 +-
 src/app/openaireLibrary                       |   2 +-
 src/app/topic/topic.component.html            | 417 ++++++++----------
 src/app/topic/topic.component.ts              |   8 +-
 src/assets/common-assets                      |   2 +-
 src/assets/openaire-theme                     |   2 +-
 9 files changed, 235 insertions(+), 271 deletions(-)

diff --git a/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts b/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
index e8d1c79..84d378d 100644
--- a/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
+++ b/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
@@ -21,20 +21,19 @@ import {RouterModule} from "@angular/router";
     {
       path: 'indicators',
       loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
+      data: {hasInternalSidebar: true},
       pathMatch: 'full'
     },
     {
       path: 'indicators/:topic',
       loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
+      data: {hasInternalSidebar: true},
       pathMatch: 'full'
     },
     {
       path: 'admin-tools',
       loadChildren: () => import('../admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
-      data: {
-        param: 'stakeholder',
-        parentClass: 'monitor'
-      }
+      data: {param: 'stakeholder', parentClass: 'monitor'}
     }
   ])]
 })
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c3c7c0e..8c05fa6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,14 +2,15 @@
   <loading [full]="true"></loading>
 </div>
 <div *ngIf="!loading" [class.monitor]="isFrontPage">
-  <div id="container" class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu)"
-       [class.sidebar_mini]="!open &&  (hasSidebar || hasAdminMenu)">
+  <div id="container" class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu || hasInternalSidebar)"
+       [class.sidebar_mini]="!open &&  (hasSidebar || hasAdminMenu || hasInternalSidebar)">
     <div id="modal-container"></div>
     <navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
               [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
     <div>
-      <dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" queryParamsHandling="merge" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>
-      <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
+      <dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar && !hasInternalSidebar" queryParamsHandling="merge" [items]="sideBarItems"
+                         [activeItem]="activeTopic?activeTopic.alias:null" [activeSubItem]="activeCategory?activeCategory.alias:null"></dashboard-sidebar>
+      <dashboard-sidebar *ngIf="hasAdminMenu && !hasInternalSidebar" [items]="adminMenuItems" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
       <main>
         <router-outlet></router-outlet>
       </main>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index bea08ff..089b784 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,7 +7,13 @@ import {StakeholderService} from "./openaireLibrary/monitor/services/stakeholder
 import {BehaviorSubject, Subscriber} from "rxjs";
 import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {MenuItem} from "./openaireLibrary/sharedComponents/menu";
-import {Stakeholder, StakeholderEntities, Topic, Visibility} from "./openaireLibrary/monitor/entities/stakeholder";
+import {
+  Category,
+  Stakeholder,
+  StakeholderEntities,
+  Topic,
+  Visibility
+} from "./openaireLibrary/monitor/entities/stakeholder";
 import {LinksResolver} from "./search/links-resolver";
 import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
 import {properties} from "../environments/environment";
@@ -32,6 +38,7 @@ export class AppComponent implements OnInit, OnDestroy {
   hasSidebar: boolean = false;
   hasHeader: boolean = false;
   hasAdminMenu: boolean = false;
+  hasInternalSidebar: boolean = false;
   isFrontPage: boolean = false;
   isViewPublic: boolean = false;
   sideBarItems: MenuItem[] = [];
@@ -57,6 +64,7 @@ export class AppComponent implements OnInit, OnDestroy {
   adminMenuItems: MenuItem[] = [];
   stakeholder: Stakeholder = null;
   activeTopic: Topic = null;
+  activeCategory: Category = null;
   loading: boolean = true;
   paramsResolved: boolean = false;
   innerWidth;
@@ -110,6 +118,10 @@ export class AppComponent implements OnInit, OnDestroy {
       this.hasAdminMenu = hasAdminMenu;
       this.cdr.detectChanges();
     }));
+    this.subscriptions.push(this.layoutService.hasInternalSidebar.subscribe(hasInternalSidebar => {
+      this.hasInternalSidebar = hasInternalSidebar;
+      this.cdr.detectChanges();
+    }));
     this.subscriptions.push(this.layoutService.isFrontPage.subscribe(isFrontPage => {
       this.isFrontPage = isFrontPage;
       this.cdr.detectChanges();
@@ -134,6 +146,11 @@ export class AppComponent implements OnInit, OnDestroy {
                 } else {
                   this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility));
                 }
+                if (params && params['category']) {
+                  this.activeCategory = this.activeTopic.categories.find(category => category.alias === decodeURIComponent(params['category']) && this.isPublicOrIsMember(category.visibility));
+                } else {
+                  this.activeCategory = this.activeTopic.categories.find(category => this.isPublicOrIsMember(category.visibility));
+                }
                 this.setSideBar();
                 this.buildMenu();
                 this.loading = false;
@@ -152,6 +169,11 @@ export class AppComponent implements OnInit, OnDestroy {
             } else {
               this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility));
             }
+            if (params && params['category']) {
+              this.activeCategory = this.activeTopic.categories.find(category => category.alias === decodeURIComponent(params['category']) && this.isPublicOrIsMember(category.visibility));
+            } else {
+              this.activeCategory = this.activeTopic.categories.find(category => this.isPublicOrIsMember(category.visibility));
+            }
             this.loading = false;
           }
         } else {
@@ -237,12 +259,16 @@ export class AppComponent implements OnInit, OnDestroy {
   private setSideBar() {
     let items: MenuItem[] = [];
     if (this.isPublicOrIsMember(this.stakeholder.visibility)) {
-      this.stakeholder.topics.forEach((topic) => {
+      this.stakeholder.topics.forEach((topic: Topic) => {
         if (this.isPublicOrIsMember(topic.visibility)) {
-          let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
-              '/' + this.stakeholder.alias + '/' + topic.alias),
+          let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", '/' + this.stakeholder.alias + '/' + topic.alias,
             null, [], [], {}, {svg: topic.icon}, null, null, (
               '/' + this.stakeholder.alias + '/' + topic.alias));
+          topicItem.items = topic.categories.map(category => {
+            return new MenuItem(category.alias, category.name, "", ('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias),
+              null, [], [], {}, {svg: topic.icon}, null, null,
+              ('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias));
+          });
           items.push(topicItem);
         }
       });
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 9e8f3f1..18d4b3c 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -47,31 +47,18 @@
       </div>
     </div>
   </div>
-  <div *ngIf="activeTopic && activeTopic.categories.length > 0" class="uk-margin-medium-top" actions>
+  <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-margin-medium-top" actions>
     <ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab uk-margin-remove-bottom">
-      <ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
-        <li *ngIf="isPublicOrIsMember(category.visibility)"
-            [class.uk-active]="category.alias === activeCategory.alias">
-          <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
+      <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
+        <li *ngIf="isPublicOrIsMember(subCategory.visibility)"
+            [class.uk-active]="subCategory.alias === activeSubCategory.alias">
+          <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
              [queryParams]="queryParams">
-            <span class="title">{{category.name}}</span>
+            <span class="title">{{subCategory.name}}</span>
           </a>
         </li>
       </ng-template>
     </ul>
-    <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right uk-margin-top">
-      <ul class="uk-subnav uk-subnav-pill-alt">
-        <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
-          <li *ngIf="isPublicOrIsMember(subCategory.visibility)"
-              [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
-            <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
-               [queryParams]="queryParams"
-               class="uk-margin-remove-bottom"
-            ><span>{{subCategory.name}}</span></a>
-          </li>
-        </ng-template>
-      </ul>
-    </div>
   </div>
   <div inner>
     <div *ngIf="privateStakeholder" class="message">
diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index 56a8a03..7bae3b1 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit 56a8a035cc5df422fc5fa442694bdc87894cdd26
+Subproject commit 7bae3b1ebb01a87246f9cc886cc5777ab5ddcf33
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 91e16c3..ca04ab4 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -12,90 +12,166 @@
       </a>
     </div>
     <div class="menu_section uk-margin-large-top">
-      <ul #topics class="uk-list uk-nav uk-nav-default" transition-group uk-nav>
-        <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
-          <li class="uk-visible-toggle" [class.uk-active]="topicIndex == i" transition-group-item>
-            <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
-               [attr.uk-tooltip]="'title: ' + topic.name + '; delay: 500'">
-              <div class="uk-flex uk-flex-middle uk-flex-center">
-                <div *ngIf="topic.icon" class="uk-width-auto">
-                  <icon class="menu-icon" [svg]="topic.icon" [flex]="true"></icon>
-                </div>
-                <span *ngIf="open || !topic.icon" [class.uk-text-small]="!open"
-                      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"
-                      (click)="$event.stopPropagation();$event.preventDefault()">
-                  <a class="uk-link-reset uk-flex uk-flex-middle">
-                    <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
-                          ratio="0.6"></icon>
-                    <icon [flex]="true" name="more_vert"></icon>
-                  </a>
-                  <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
-                    <ul class="uk-nav uk-dropdown-nav">
-                      <ng-container *ngIf="isCurator">
-                        <li>
-                          <a (click)="editTopicOpen(i); hide(element)">
-                            <div class="uk-flex uk-flex-middle">
-                               <icon [flex]="true" name="edit" ratio="0.6"></icon>
-                               <span class="uk-margin-small-left uk-width-expand">Edit</span>
-                            </div>
-                          </a>
-                        </li>
-                        <li *ngIf="i > 0 || i < stakeholder.topics.length - 1" class="uk-nav-divider"></li>
-                        <li *ngIf="i > 0">
-                          <a (click)="hide(element);moveTopic(i)">
-                            <div class="uk-flex uk-flex-middle">
-                               <icon [flex]="true" name="north" ratio="0.6"></icon>
-                               <span class="uk-margin-small-left uk-width-expand">Move Up</span>
-                            </div>
-                          </a>
-                        </li>
-                        <li *ngIf="i < stakeholder.topics.length - 1">
-                          <a (click)="hide(element);moveTopic(i, i + 1)">
-                            <div class="uk-flex uk-flex-middle">
-                               <icon [flex]="true" name="south" ratio="0.6"></icon>
-                               <span class="uk-margin-small-left uk-width-expand">Move Down</span>
-                            </div>
-                          </a>
-                        </li>
-                        <li class="uk-nav-divider"></li>
-                      </ng-container>
-                      <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
-                        <li [class.uk-active]="topic.visibility === v.value">
-                          <a (click)="openVisibilityModal(i, v.value, 'topic'); hide(element)">
-                            <div class="uk-flex uk-flex-middle">
-                               <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
-                               <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
-                               <icon *ngIf="topic.visibility === v.value" [flex]="true" name="done"
-                                     class="uk-text-secondary" ratio="0.8"></icon>
-                            </div>
-                          </a>
-                        </li>
-                      </ng-template>
-                      <ng-container *ngIf="!topic.defaultId && isCurator">
-                        <li class="uk-nav-divider">
-                        <li>
-                          <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">
-                            <div class="uk-flex uk-flex-middle">
-                               <icon [flex]="true" name="delete" ratio="0.6"></icon>
-                               <span class="uk-margin-small-left uk-width-expand">Delete</span>
-                            </div>
-                          </a>
-                          <!--<ng-container *ngIf="!stakeholder.defaultId">
-                            <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a>
-                            <a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>
-                          </ng-container>-->
-                        </li>
-                      </ng-container>
-                    </ul>
-                  </div>
-                </span>
+      <ul #topics class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" transition-group uk-nav="duration: 400">
+        <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">
+              <div *ngIf="topic.icon" class="uk-width-auto">
+                <icon class="menu-icon" [svg]="topic.icon" ratio="0.9" [flex]="true"></icon>
               </div>
-            </a>
-          </li>
-        </ng-template>
+              <span *ngIf="open || !topic.icon" [class.uk-text-small]="!open"
+                    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"
+                    (click)="$event.stopPropagation();$event.preventDefault()">
+                <a class="uk-link-reset uk-flex uk-flex-middle">
+                  <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
+                        ratio="0.6"></icon>
+                  <icon [flex]="true" name="more_vert"></icon>
+                </a>
+                <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
+                  <ul class="uk-nav uk-dropdown-nav">
+                    <ng-container *ngIf="isCurator">
+                      <li>
+                        <a (click)="editTopicOpen(i); hide(element)">
+                          <div class="uk-flex uk-flex-middle">
+                             <icon [flex]="true" name="edit" ratio="0.6"></icon>
+                             <span class="uk-margin-small-left uk-width-expand">Edit</span>
+                          </div>
+                        </a>
+                      </li>
+                      <li *ngIf="i > 0 || i < stakeholder.topics.length - 1" class="uk-nav-divider"></li>
+                      <li *ngIf="i > 0">
+                        <a (click)="hide(element);moveTopic(i)">
+                          <div class="uk-flex uk-flex-middle">
+                             <icon [flex]="true" name="north" ratio="0.6"></icon>
+                             <span class="uk-margin-small-left uk-width-expand">Move Up</span>
+                          </div>
+                        </a>
+                      </li>
+                      <li *ngIf="i < stakeholder.topics.length - 1">
+                        <a (click)="hide(element);moveTopic(i, i + 1)">
+                          <div class="uk-flex uk-flex-middle">
+                             <icon [flex]="true" name="south" ratio="0.6"></icon>
+                             <span class="uk-margin-small-left uk-width-expand">Move Down</span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="uk-nav-divider"></li>
+                    </ng-container>
+                    <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
+                      <li [class.uk-active]="topic.visibility === v.value">
+                        <a (click)="openVisibilityModal(i, v.value, 'topic'); hide(element)">
+                          <div class="uk-flex uk-flex-middle">
+                             <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
+                             <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
+                             <icon *ngIf="topic.visibility === v.value" [flex]="true" name="done"
+                                   class="uk-text-secondary" ratio="0.8"></icon>
+                          </div>
+                        </a>
+                      </li>
+                    </ng-template>
+                    <ng-container *ngIf="!topic.defaultId && isCurator">
+                      <li class="uk-nav-divider">
+                      <li>
+                        <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">
+                          <div class="uk-flex uk-flex-middle">
+                             <icon [flex]="true" name="delete" ratio="0.6"></icon>
+                             <span class="uk-margin-small-left uk-width-expand">Delete</span>
+                          </div>
+                        </a>
+                        <!--<ng-container *ngIf="!stakeholder.defaultId">
+                          <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a>
+                          <a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>
+                        </ng-container>-->
+                      </li>
+                    </ng-container>
+                  </ul>
+                </div>
+              </span>
+            </span>
+          </a>
+          <ul class="uk-nav-sub" #categories transition-group>
+            <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">
+                  <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"
+                            (click)="$event.stopPropagation();$event.preventDefault()">
+                    <a class="uk-link-reset uk-flex uk-flex-middle">
+                      <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
+                            ratio="0.6"></icon>
+                      <icon [flex]="true" name="more_vert"></icon>
+                    </a>
+                    <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
+                      <ul class="uk-nav uk-dropdown-nav">
+                        <ng-container *ngIf="isCurator">
+                          <li>
+                            <a (click)="editCategoryOpen(j); hide(element)">
+                              <div class="uk-flex uk-flex-middle">
+                                 <icon [flex]="true" name="edit" ratio="0.6"></icon>
+                                 <span class="uk-margin-small-left uk-width-expand">Edit</span>
+                              </div>
+                            </a>
+                          </li>
+                          <li *ngIf="j > 0 || j < stakeholder.topics[topicIndex].categories.length - 1" class="uk-nav-divider"></li>
+                          <li *ngIf="j > 0">
+                            <a (click)="hide(element);moveCategory(j)">
+                              <div class="uk-flex uk-flex-middle">
+                                 <icon [flex]="true" name="north" ratio="0.6"></icon>
+                                 <span class="uk-margin-small-left uk-width-expand">Move Up</span>
+                              </div>
+                            </a>
+                          </li>
+                          <li *ngIf="j < stakeholder.topics[topicIndex].categories.length - 1">
+                            <a (click)="hide(element);moveCategory(j, j + 1)">
+                              <div class="uk-flex uk-flex-middle">
+                                 <icon [flex]="true" name="south" ratio="0.6"></icon>
+                                 <span class="uk-margin-small-left uk-width-expand">Move Down</span>
+                              </div>
+                            </a>
+                          </li>
+                          <li class="uk-nav-divider"></li>
+                        </ng-container>
+                        <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
+                          <li [class.uk-active]="category.visibility === v.value">
+                            <a (click)="openVisibilityModal(j, v.value, 'category'); hide(element)">
+                              <div class="uk-flex uk-flex-middle">
+                                 <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
+                                 <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
+                                 <icon *ngIf="topic.visibility === v.value" [flex]="true" name="done"
+                                       class="uk-text-secondary" ratio="0.8"></icon>
+                              </div>
+                            </a>
+                          </li>
+                        </ng-template>
+                        <ng-container *ngIf="!category.defaultId && isCurator">
+                          <li class="uk-nav-divider">
+                          <li>
+                            <a (click)="deleteCategoryOpen(j, 'delete'); hide(element)">
+                              <div class="uk-flex uk-flex-middle">
+                                 <icon [flex]="true" name="delete" ratio="0.6"></icon>
+                                 <span class="uk-margin-small-left uk-width-expand">Delete</span>
+                              </div>
+                            </a>
+                          </li>
+                        </ng-container>
+                      </ul>
+                    </div>
+                  </span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
+                <icon name="add" [flex]="true"></icon>
+                <span>Create new category</span>
+              </a>
+            </li>
+          </ul>
+        </li>
         <li *ngIf="isCurator">
           <a (click)="editTopicOpen(-1); $event.preventDefault()">
             <div class="uk-flex uk-flex-middle uk-flex-center">
@@ -124,105 +200,22 @@
   </div>
   <div actions>
     <div class="uk-margin-medium-top uk-margin-bottom">
-      <ul *ngIf="stakeholder.topics[topicIndex]" #categories transition-group class="uk-tab">
-        <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
-          <li class="uk-visible-toggle uk-flex" [class.uk-active]="categoryIndex === i" transition-group-item>
-            <a (click)="chooseCategory(i)">
-              <span class="title"> {{category.name}}</span>
+      <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
+          #subCategories transition-group class="uk-tab">
+        <ng-template ngFor [ngForOf]=" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
+          <li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
+            <a (click)="chooseSubcategory(i)">
+              <span class="title"> {{subCategory.name}}</span>
             </a>
             <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
-                  [class.uk-invisible-hover]="categoryIndex !== i"
+                  [class.uk-invisible-hover]="subCategoryIndex !== i"
                   (click)="$event.stopPropagation();$event.preventDefault()">
-              <a class="uk-link-reset uk-flex uk-flex-middle">
-                <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
-                      ratio="0.6"></icon>
-                <icon [flex]="true" name="more_vert"></icon>
-              </a>
-              <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
-                <ul class="uk-nav uk-dropdown-nav">
-                  <ng-container *ngIf="isCurator">
-                    <li>
-                      <a (click)="editCategoryOpen(i); hide(element)">
-                        <div class="uk-flex uk-flex-middle">
-                           <icon [flex]="true" name="edit" ratio="0.6"></icon>
-                           <span class="uk-margin-small-left uk-width-expand">Edit</span>
-                        </div>
-                      </a>
-                    </li>
-                    <li *ngIf="i > 0 || i < stakeholder.topics[topicIndex].categories.length - 1"
-                        class="uk-nav-divider"></li>
-                    <li *ngIf="i > 0">
-                      <a (click)="hide(element);moveCategory(i)">
-                        <div class="uk-flex uk-flex-middle">
-                           <icon [flex]="true" name="west" ratio="0.6"></icon>
-                           <span class="uk-margin-small-left uk-width-expand">Move Left</span>
-                        </div>
-                      </a>
-                    </li>
-                    <li *ngIf="i < stakeholder.topics[topicIndex].categories.length - 1">
-                      <a (click)="hide(element);moveCategory(i, i + 1)">
-                        <div class="uk-flex uk-flex-middle">
-                           <icon [flex]="true" name="east" ratio="0.6"></icon>
-                           <span class="uk-margin-small-left uk-width-expand">Move Right</span>
-                        </div>
-                      </a>
-                    </li>
-                    <li class="uk-nav-divider"></li>
-                  </ng-container>
-                  <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
-                    <li [class.uk-active]="category.visibility === v.value">
-                      <a (click)="openVisibilityModal(i, v.value, 'category'); hide(element)">
-                        <div class="uk-flex uk-flex-middle">
-                           <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
-                           <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
-                           <icon *ngIf="category.visibility === v.value" [flex]="true" name="done"
-                                 class="uk-text-secondary" ratio="0.8"></icon>
-                        </div>
-                      </a>
-                    </li>
-                  </ng-template>
-                  <ng-container *ngIf="!category.defaultId && isCurator">
-                    <li class="uk-nav-divider">
-                    <li>
-                      <a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">
-                        <div class="uk-flex uk-flex-middle">
-                           <icon [flex]="true" name="delete" ratio="0.6"></icon>
-                           <span class="uk-margin-small-left uk-width-expand">Delete</span>
-                        </div>
-                      </a>
-                    </li>
-                  </ng-container>
-                </ul>
-              </div>
-            </span>
-          </li>
-        </ng-template>
-        <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>
-          </a>
-        </li>
-      </ul>
-      <div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
-        <div class="uk-width-expand">
-          <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
-              #subCategories class="uk-subnav uk-subnav-pill" transition-group>
-            <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
-                         let-subCategory let-i="index">
-              <li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
-                <a (click)="chooseSubcategory(i);$event.preventDefault()" class="uk-margin-small-left">
-                  <span>{{subCategory.name}}</span>
-                </a>
-                <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
-                      [class.uk-invisible-hover]="subCategoryIndex !== i"
-                      (click)="$event.stopPropagation();$event.preventDefault()">
               <a class="uk-link-reset uk-flex uk-flex-middle">
                 <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
                       ratio="0.6"></icon>
                 <icon [flex]="true" name="more_vert"></icon>
               </a>
-              <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
+              <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body">
                 <ul class="uk-nav uk-dropdown-nav">
                   <ng-container *ngIf="isCurator">
                     <li>
@@ -252,32 +245,15 @@
                       </a>
                     </li>
                     <li class="uk-nav-divider"></li>
-                    <li *ngIf="indicators">
-                      <a (click)=" indicators.exportIndicators(i);hide(element)">
-                        <div class="uk-flex uk-flex-middle">
-                          <icon [flex]="true" name="download" ratio="0.6"></icon>
-                          <span class="uk-margin-small-left uk-width-expand">Export indicators</span>
-                        </div>
-                      </a>
-                    </li>
-                    <li *ngIf="indicators">
-                      <a (click)="file.value = ''; this.index=i; file.click(); hide(element)">
-                        <div class="uk-flex uk-flex-middle">
-                          <icon [flex]="true" name="upload" ratio="0.6"></icon>
-                          <span class="uk-margin-small-left uk-width-expand">Import indicators</span>
-                        </div>
-                      </a>
-                    </li>
-                    <li class="uk-nav-divider"></li>
                   </ng-container>
                   <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
                     <li [class.uk-active]="subCategory.visibility === v.value">
                       <a (click)="openVisibilityModal(i, v.value, 'subcategory'); hide(element)">
                         <div class="uk-flex uk-flex-middle">
-                          <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
-                          <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
-                          <icon *ngIf="subCategory.visibility === v.value" [flex]="true" name="done"
-                                class="uk-text-secondary" ratio="0.8"></icon>
+                           <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
+                           <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
+                           <icon *ngIf="subCategory.visibility === v.value" [flex]="true" name="done"
+                                 class="uk-text-secondary" ratio="0.8"></icon>
                         </div>
                       </a>
                     </li>
@@ -287,8 +263,8 @@
                     <li>
                       <a (click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">
                         <div class="uk-flex uk-flex-middle">
-                          <icon [flex]="true" name="delete" ratio="0.6"></icon>
-                          <span class="uk-margin-small-left uk-width-expand">Delete</span>
+                           <icon [flex]="true" name="delete" ratio="0.6"></icon>
+                           <span class="uk-margin-small-left uk-width-expand">Delete</span>
                         </div>
                       </a>
                     </li>
@@ -296,44 +272,15 @@
                 </ul>
               </div>
             </span>
-              </li>
-            </ng-template>
-            <li *ngIf="isCurator">
-              <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
-                <icon name="add" [flex]="true"></icon>
-                <span>Create new subcategory</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div *ngIf="stakeholder.topics.length > 0" class="uk-width-auto@m uk-width-1-1">
-          <div class="uk-flex uk-flex-center">
-            <button class="uk-button uk-button-primary uk-flex uk-flex-middle">
-              <icon name="visibility" [flex]="true"></icon>
-              <span class="uk-margin-small-left uk-margin-small-right">Preview</span>
-              <icon name="expand_more" [flex]="true"></icon>
-            </button>
-            <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
-              <ul class="uk-nav uk-dropdown-nav">
-                <li><a target="_blank"
-                       [routerLink]="'/' + stakeholder.alias + '/' + stakeholder.topics[topicIndex].alias"
-                       [queryParams]="{view: 'public'}"
-                       (click)="hide(element)">Public view</a>
-                </li>
-                <li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' +
-              stakeholder.topics[topicIndex].alias"
-                       [queryParams]="{view: 'restricted'}"
-                       (click)="hide(element)">Restricted view</a>
-                </li>
-                <!--<li class="disabled"><a class="uk-disabled uk-text-muted"
-                                    uk-tooltip="Note: available only in administration dashboard"
-                       (click)="hide(element)">Private view</a>
-                </li>-->
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
+          </li>
+        </ng-template>
+        <li *ngIf="isCurator">
+          <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
+            <icon name="add" [flex]="true"></icon>
+            <span>Create new subcategory</span>
+          </a>
+        </li>
+      </ul>
     </div>
   </div>
   <div inner>
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
index 102ccd9..7dd70df 100644
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@@ -25,7 +25,7 @@ declare var UIkit;
   selector: 'topic',
   templateUrl: './topic.component.html',
 })
-export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
+export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeactivateComponent {
   private topicSubscriptions: any[] = [];
   private subscriptions: any[] = [];
   public properties: EnvProperties = properties;
@@ -136,6 +136,10 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     }))
   }
   
+  ngAfterViewInit() {
+    UIkit.nav(this.topics.element.nativeElement).toggle(this.topicIndex, false);
+  }
+  
   public ngOnDestroy() {
     this.topicSubscriptions.forEach(value => {
       if (value instanceof Subscriber) {
diff --git a/src/assets/common-assets b/src/assets/common-assets
index fc2e0b8..bcceb83 160000
--- a/src/assets/common-assets
+++ b/src/assets/common-assets
@@ -1 +1 @@
-Subproject commit fc2e0b805ae3011f0f181983b27905908e528083
+Subproject commit bcceb8367e2e9c1bd480f54ff2822235c51c1650
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index 1866a89..67483e8 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit 1866a893c6b467f5e26a9659e37acaf4071a7f6c
+Subproject commit 67483e8b95c23aa8dcb2d1203e1fe89a4d7f033f