diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 45e985445..a49c429a5 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -26,7 +26,7 @@ const appRoutes: Routes = [
}
},
{
- path: 'exploreplans',
+ path: 'explore-plans',
loadChildren: './ui/explore-dmp/explore-dmp.module#ExploreDmpModule',
data: {
breadcrumb: true
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
index 16a890fdb..77a567eae 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
@@ -1,8 +1,5 @@
.sidebar-footer {
- width: 230px;
- height: 40px;
- margin: 5px 15px;
- padding: 5px;
+ padding: 0.3em;
color: rgb(117, 117, 117);
background-color: #ffffff;
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
index 1e5fd15b6..0d11d4073 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
@@ -1,28 +1,27 @@
.logo-img {
- width: 60px;
- display: block;
- max-height: none;
- margin-left: 100px;
+ width: 60px;
+ display: block;
+ max-height: none;
+ margin-left: 100px;
}
.logo-img img {
- width: 60px;
- top: 0px;
- position: inherit;
+ width: 60px;
+ top: 0px;
+ position: inherit;
}
.sidebarSubtitle p {
- margin-left: 20px;
- color: rgb(166, 166, 166);
+ margin-left: 20px;
+ color: rgb(166, 166, 166);
}
.nav hr {
- width: 230px;
- border-top: 1px solid #fff;
- border-bottom: 2px solid #d4d4d4;
+ width: 230px;
+ border-top: 1px solid #fff;
+ border-bottom: 2px solid #d4d4d4;
}
.sidebar-footer {
- position: relative;
- height: 48%;
+ margin-top: auto;
}
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
index 1d9146058..d49636556 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
@@ -29,8 +29,7 @@
-
+
{{ 'SIDE-BAR.ACCOUNT' | translate }}
@@ -46,24 +45,21 @@
-
+
-
+
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
index dc8bd3fd0..2f118cf89 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
@@ -1,13 +1,14 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
+import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '../../core/services/auth/auth.service';
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
declare interface RouteInfo {
- path: string;
- title: string;
- icon: string;
+ path: string;
+ title: string;
+ icon: string;
+ requiresAuthentication: boolean;
}
declare interface GroupMenuItem {
title: string;
@@ -15,74 +16,61 @@ declare interface GroupMenuItem {
}
export const GENERAL_ROUTES: RouteInfo[] = [
- { path: '/home', title: '', icon: 'dashboard'}
+ { path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard', requiresAuthentication: true }
];
export const DMP_ROUTES: RouteInfo[] = [
- { path: '/plans', title: '', icon: 'view_agenda'},
- { path: '/datasets', title: '', icon: 'library_books'},
- { path: '/projects', title: '', icon: 'work_outline'}
+ { path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda', requiresAuthentication: true },
+ { path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books', requiresAuthentication: true },
+ { path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline', requiresAuthentication: true }
];
// export const HISTORY_ROUTES: RouteInfo[] = [
-// { path: '/typography', title: 'LAST VISITED', icon: 'visibility'},
-// { path: '/icons', title: 'LAST EDITED', icon: 'edit'}
+// { path: '/typography', title: 'SIDE-BAR.HISTORY-VISITED', icon: 'visibility'},
+// { path: '/icons', title: 'SIDE-BAR.HISTORY-EDITED', icon: 'edit'}
// ];
export const PUBLIC_ROUTES: RouteInfo[] = [
-// { path: '/maps', title: 'PUBLIC DMPs', icon: 'public'},
- { path: '/explore', title: 'PUBLIC DATASET DESCRIPTIONS', icon: 'public'},
- { path: '/exploreplans', title: 'PUBLIC DATASET PLANS ', icon: 'public'}
+ { path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public', requiresAuthentication: false },
+ { path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public', requiresAuthentication: false }
];
@Component({
- selector: 'app-sidebar',
- templateUrl: './sidebar.component.html',
- styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
+ selector: 'app-sidebar',
+ templateUrl: './sidebar.component.html',
+ styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
- generalItems: GroupMenuItem;
- dmpItems: GroupMenuItem;
-// historyItems: GroupMenuItem;
- publicItems: GroupMenuItem;
- groupMenuItems: GroupMenuItem[] = [];
+ generalItems: GroupMenuItem;
+ dmpItems: GroupMenuItem;
+ // historyItems: GroupMenuItem;
+ publicItems: GroupMenuItem;
+ groupMenuItems: GroupMenuItem[] = [];
- constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { }
+ constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { }
- ngOnInit() {
- this.translate.get('SIDE-BAR.DASHBOARD').subscribe((res: string) => {GENERAL_ROUTES[0].title = res});
- this.translate.get('SIDE-BAR.MY-DMPS').subscribe((res: string) => {DMP_ROUTES[0].title = res});
- this.translate.get('SIDE-BAR.MY-DATASET-DESC').subscribe((res: string) => {DMP_ROUTES[1].title = res});
- this.translate.get('SIDE-BAR.MY-PROJECTS').subscribe((res: string) => {DMP_ROUTES[2].title = res});
- // this.translate.get('SIDE-BAR.HISTORY-VISITED').subscribe((res: string) => {HISTORY_ROUTES[0].title = res});
- // this.translate.get('SIDE-BAR.HISTORY-EDITED').subscribe((res: string) => {HISTORY_ROUTES[1].title = res});
- this.translate.get('SIDE-BAR.PUBLIC-DESC').subscribe((res: string) => {PUBLIC_ROUTES[0].title = res});
- this.translate.get('SIDE-BAR.PUBLIC-DMPS').subscribe((res: string) => {PUBLIC_ROUTES[1].title = res});
- this.generalItems = {
- title: '',
- routes: GENERAL_ROUTES.filter(menuItem => menuItem)
+ ngOnInit() {
+ this.generalItems = {
+ title: 'SIDE-BAR.GENERAL',
+ routes: GENERAL_ROUTES
+ }
+ this.groupMenuItems.push(this.generalItems);
+
+ this.dmpItems = {
+ title: 'SIDE-BAR.DMP',
+ routes: DMP_ROUTES
+ }
+ this.groupMenuItems.push(this.dmpItems);
+
+ // this.historyItems = {
+ // title: 'SIDE-BAR.HISTORY',
+ // routes: HISTORY_ROUTES
+ // }
+ // this.groupMenuItems.push(this.historyItems);
+
+ this.publicItems = {
+ title: 'SIDE-BAR.PUBLIC',
+ routes: PUBLIC_ROUTES
+ }
+ this.groupMenuItems.push(this.publicItems);
}
- this.translate.get('SIDE-BAR.GENERAL').subscribe((res: string) => {this.generalItems.title = res});
- this.groupMenuItems.push(this.generalItems);
-
- this.dmpItems = {
- title: '',
- routes: DMP_ROUTES.filter(menuItem => menuItem)
- }
- this.translate.get('SIDE-BAR.DMP').subscribe((res: string) => {this.dmpItems.title = res});
- this.groupMenuItems.push(this.dmpItems);
-
- // this.historyItems = {
- // title: '',
- // routes: HISTORY_ROUTES.filter(menuItem => menuItem)
- // }
- // this.translate.get('SIDE-BAR.HISTORY').subscribe((res: string) => {this.historyItems.title = res});
- // this.groupMenuItems.push(this.historyItems);
-
- this.publicItems = {
- title: '',
- routes: PUBLIC_ROUTES.filter(menuItem => menuItem)
- }
- this.translate.get('SIDE-BAR.PUBLIC').subscribe((res: string) => {this.publicItems.title = res});
- this.groupMenuItems.push(this.publicItems);
- }
public principalHasAvatar(): boolean {
return this.authentication.current().avatarUrl != null;
@@ -96,6 +84,19 @@ export class SidebarComponent implements OnInit {
return !(!this.authentication.current());
}
+ public getMenuItems() {
+
+ if (this.isAuthenticated()) {
+ return this.groupMenuItems;
+ } else {
+ const groupMenuItems = this.groupMenuItems.filter(x => x);
+ groupMenuItems.forEach(group => {
+ group.routes = group.routes.filter(y => !y.requiresAuthentication);
+ });
+ return groupMenuItems.filter(x => x.routes.length > 0);
+ }
+ }
+
openProfile() {
const dialogRef = this.dialog.open(UserDialogComponent, {
hasBackdrop: true,
diff --git a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
index 0194352ca..8a2f082c0 100644
--- a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
+++ b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
@@ -48,8 +48,9 @@
overflow: auto;
width: 260px;
z-index: 4;
-
padding-bottom: 10px;
+ display: flex;
+ flex-direction: column;
.dropdown .dropdown-backdrop {
display: none !important;