src/app/app.component.ts

@@ -303,11 +303,11 @@ export class AppComponent implements OnInit, OnDestroy {
     }
     this.adminMenuItems = [];
     this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, {name: 'badge'}));
-    this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}));
+    this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}, null, "uk-visible@m"));
     if (this.stakeholder.defaultId) {
-      this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, {name: 'group'}, null, null, "/admin/" + this.stakeholder.alias + "/users"));
+      this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, {name: 'group'}, null, "uk-visible@m", "/admin/" + this.stakeholder.alias + "/users"));
       if (this.isCurator()) {
-        this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, {name: 'description'}, null, null, "/admin/" + this.stakeholder.alias + "/admin-tools"));
+        this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, {name: 'description'}, null, "uk-visible@m", "/admin/" + this.stakeholder.alias + "/admin-tools"));
       }
     }
     this.backItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {}, {name: 'west'});
@@ -324,10 +324,10 @@ export class AppComponent implements OnInit, OnDestroy {
           "", "/admin", false, [], [], {}));
       }
       if (Session.isPortalAdministrator(this.user)) {
-        this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}));
+        this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {},null, null, "uk-visible@m"));
       }
       if (this.isCurator()) {
-        this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
+        this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {},null, null, "uk-visible@m"));
       }
     }
     if (this.stakeholder) {
@@ -355,7 +355,7 @@ export class AppComponent implements OnInit, OnDestroy {
         this.menuItems.push(
           new MenuItem("manage", "Manage",
             "", "/admin/" + this.stakeholder.alias, false, [], null, {}
-            , null, null, null, null)
+            , null, null, "uk-visible@m", null)
         );
       }
       if (!this.hasAdminMenu && this.isFrontPage) {
@@ -413,10 +413,10 @@ export class AppComponent implements OnInit, OnDestroy {
         this.backItem = null;
         this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
         if (Session.isPortalAdministrator(this.user)) {
-          this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin/admin-tools'));
+          this.adminMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, "uk-visible@m", '/admin/admin-tools'));
         }
         if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
-          this.adminMenuItems.push(new MenuItem("monitor", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/admin/monitor/admin-tools'));
+          this.adminMenuItems.push(new MenuItem("monitorOptions", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, "uk-visible@m", '/admin/monitor/admin-tools'));
         }
         this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 1;
       }

src/app/general/general.component.html

@@ -1,14 +1,7 @@
 <div page-content>
-	<div header *ngIf="stakeholder">
-		<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
-			<div>
-				<div class="uk-text-background uk-text-bold uk-text-small">Manage Profile</div>
-				<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
-			</div>
-		</div>
-	</div>
 	<div actions>
-		<div class="uk-section-xsmall uk-container">
+		<sidebar-mobile-toggle class="uk-margin-top uk-hidden@m uk-display-block"></sidebar-mobile-toggle>
+		<div class="uk-section-xsmall uk-container uk-margin-top">
 			<div class="uk-flex uk-flex-center uk-flex-right@m">
 				<button class="uk-button uk-button-default uk-margin-right"
 								(click)="reset()" [class.uk-disabled]="loading || !editStakeholderComponent.dirty"

src/app/general/general.module.ts

@@ -11,6 +11,9 @@ import {ReactiveFormsModule} from "@angular/forms";
 import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module";
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
+import {
+  SidebarMobileToggleModule
+} from "../openaireLibrary/dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module";
 
 @NgModule({
   declarations: [GeneralComponent],
@@ -24,7 +27,8 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
     ReactiveFormsModule,
     EditStakeholderModule,
     PageContentModule,
-    LogoUrlPipeModule
+    LogoUrlPipeModule,
+    SidebarMobileToggleModule
   ],
   providers: [
     PreviousRouteRecorder,

src/app/manageStakeholders/manageStakeholders.component.html

@@ -1,17 +1,14 @@
 <div page-content>
   <div header>
-    <div class="uk-flex uk-flex-middle uk-margin-medium-top info">
+    <sidebar-mobile-toggle class="uk-margin-top uk-hidden@m uk-display-block"></sidebar-mobile-toggle>
-      <div>
+    <div *ngIf="isCurator()" class="uk-margin-remove-bottom uk-margin-medium-top">
-        <div class="uk-text-background uk-text-bold uk-text-small">Manage profiles</div>
+      <slider-tabs [type]="'dynamic'" (activeEmitter)="tab = $event">
-        <h1 class="uk-h6 uk-margin-remove">Profile Templates & Profiles</h1>
+        <slider-tab tabTitle="All" [tabId]="'all'" [active]="tab === 'all'"></slider-tab>
+        <slider-tab tabTitle="Profile templates" [tabId]="'templates'" [active]="tab === 'templates'"></slider-tab>
+        <slider-tab tabTitle="Profiles" [tabId]="'profiles'" [active]="tab === 'profiles'"></slider-tab>
+      </slider-tabs>
     </div>
   </div>
-    <ul *ngIf="isCurator()" class="uk-tab uk-margin-remove-bottom uk-margin-medium-top" uk-tab>
-      <li [class.uk-active]="tab === 'all'"><a (click)="tab = 'all'">All</a></li>
-      <li [class.uk-active]="tab === 'templates'"><a (click)="tab = 'templates'">Profile templates</a></li>
-      <li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li>
-    </ul>
-  </div>
   <div actions>
     <div class="uk-section-xsmall">
       <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle">

src/app/manageStakeholders/manageStakeholders.module.ts

@@ -15,6 +15,10 @@ import {earth, incognito, restricted} from "../openaireLibrary/utils/icons/icons
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
 import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
+import {
+  SidebarMobileToggleModule
+} from "../openaireLibrary/dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module";
+import {SliderTabsModule} from "../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
 
 @NgModule({
   declarations: [ManageStakeholdersComponent],
@@ -30,7 +34,9 @@ import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-inpu
     IconsModule,
     PageContentModule,
     LogoUrlPipeModule,
-		SearchInputModule
+    SearchInputModule,
+    SidebarMobileToggleModule,
+    SliderTabsModule
   ],
   providers: [
     PreviousRouteRecorder,

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit a9f31d830740cfdcea33266248b2421815834899
+Subproject commit 461e4ac4ed542e4a24b4151eadb28e4c4283d5e2

src/app/topic/topic.component.html

@@ -189,47 +189,8 @@
   </div>
 </aside>
 <div #pageContent *ngIf="stakeholder && filters" page-content>
-  <div header>
-    <div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
-      <div class="uk-margin-medium-top uk-margin-bottom uk-flex uk-flex-middle info">
-        <div class="uk-width-expand">
-          <div class="uk-text-background uk-text-bold uk-text-small">Manage Indicators</div>
-          <h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
-        </div>
-        <div *ngIf="stakeholder.topics.length > 0 && !pageContent.isStickyActive" class="uk-width-auto">
-          <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 #preview 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"
-                       [queryParams]="{view: 'PUBLIC'}"
-                       (click)="hide(preview)">Public view</a>
-                </li>
-                <li><a target="_blank" [routerLink]="'/' + stakeholder.alias"
-                       [queryParams]="{view: 'RESTRICTED'}"
-                       (click)="hide(preview)">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>
-    </div>
-  </div>
   <div actions>
-    <div class="uk-grid uk-flex-middle" uk-grid>
+    <div *ngIf="stakeholder.topics.length > 0" class="uk-flex uk-flex-center uk-margin-medium-top uk-flex-right@m uk-width-1-1">
-      <div *ngIf="stakeholder.topics.length > 0 && pageContent.isStickyActive"
-           class="uk-width-auto@m uk-margin-small-bottom uk-flex-last@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>
@@ -254,10 +215,8 @@
           </ul>
         </div>
       </div>
-      </div>
-      <div class="uk-margin-medium-top uk-width-expand">
     <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
-            transition-group class="uk-tab" [id]="'subCategories'">
+        transition-group class="uk-tab uk-margin-xsmall-top" [id]="'subCategories'">
       <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>
@@ -356,8 +315,6 @@
       </li>
     </ul>
   </div>
-    </div>
-  </div>
   <div inner>
     <input #file id="import-file" type="file" class="uk-hidden"
            (change)="indicators.fileChangeEvent($event, this.index)"/>

src/app/topic/topic.module.ts

@@ -22,11 +22,14 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
 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";
+import {
+  SidebarMobileToggleModule
+} from "../openaireLibrary/dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module";
 
 @NgModule({
   imports: [
     CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
-    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule, SideBarModule
+    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule, SideBarModule, SidebarMobileToggleModule
   ],
   declarations: [
     TopicComponent, IndicatorsComponent

src/app/users/users.component.html

@@ -5,12 +5,6 @@
 </div>
 <role-users *ngIf="!loading && stakeholder" [id]="stakeholder.alias" [type]="stakeholder.type" [name]="stakeholder.name" [link]="link" [role]="tab" [message]="messages.get(tab)"
             [emailComposer]="emailComposer" [notificationFn]="notificationFn">
-	<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
-		<div>
-			<div class="uk-text-background uk-text-bold uk-text-small">Manage Users</div>
-			<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
-		</div>
-	</div>
 	<ul class="uk-tab uk-margin-remove-bottom uk-margin-medium-top">
 		<li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
 		<li [class.uk-active]="tab === 'member'"><a routerLink="../member">Members</a></li>