Dataset Profile Editor. Ui fixes. Minimizing ng-deep leaks. Sidenav service. Side nav folds when create-edit template.

dmp-frontend/src/app/app.component.ts

@@ -2,7 +2,7 @@
 import { of as observableOf, Subscription } from 'rxjs';
 
 import { switchMap, filter, map, takeUntil } from 'rxjs/operators';
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { environment } from '../environments/environment';
@@ -18,6 +18,8 @@ import { ConfigurationService } from './core/services/configuration/configuratio
 import { Location } from '@angular/common';
 import { MatomoInjector } from 'ngx-matomo';
 import { MatomoService } from './core/services/matomo/matomo-service';
+import { SideNavService } from './core/services/sidenav/side-nav.sevice';
+import { MatSidenav } from '@angular/material';
 
 
 declare const gapi: any;
@@ -28,14 +30,17 @@ declare var $: any;
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
 
 	hasBreadCrumb = observableOf(false);
-	sideNavOpen = false;
+	// sideNavOpen = false;
+	private sideNavSubscription: Subscription;
 	helpContentEnabled: boolean;
 	private statusChangeSubscription: Subscription;
 	onlySplash = true;
 
+	@ViewChild('sidenav', {static:false}) sidenav:MatSidenav;
+
 	constructor(
 		private router: Router,
 		private route: ActivatedRoute,
@@ -49,12 +54,28 @@ export class AppComponent implements OnInit {
 		private language: LanguageService,
 		private configurationService: ConfigurationService,
 		private location: Location,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private sidenavService: SideNavService
 	) {
 		this.initializeServices();
 		this.matomoService.init();
 		this.helpContentEnabled = configurationService.helpService.enabled;
 	}
+	ngAfterViewInit(): void {
+		setTimeout(() => {
+			this.sideNavSubscription = this.sidenavService.status().subscribe(isopen=>{
+				if(isopen){
+					//update value of hamburfer
+					document.getElementById('hamburger').classList.add('change');
+					this.sidenav.open()
+				}else{
+					document.getElementById('hamburger').classList.remove('change');
+					this.sidenav.close();
+	
+				}
+			});
+		});
+	}
 
 	onActivate(event: any) {
 		this.breadCrumbResolverService.push(event);
@@ -134,7 +155,7 @@ export class AppComponent implements OnInit {
 				}
 				this.ccService.destroy();
 				this.ccService.init(this.ccService.getConfig());
-			})
+		});
 	}
 
 	translateTitle(ttl: string) {
@@ -153,6 +174,7 @@ export class AppComponent implements OnInit {
 
 	ngOnDestroy() {
 		this.statusChangeSubscription.unsubscribe();
+		this.sideNavSubscription.unsubscribe();
 	}
 
 	login() {

dmp-frontend/src/app/core/services/sidenav/side-nav.sevice.ts

@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable({
+    providedIn:'root'
+})
+export class SideNavService {
+
+    private sidebar$:BehaviorSubject<boolean> =  new BehaviorSubject<boolean>(true);
+
+    public status():Observable<boolean>{
+        return this.sidebar$.asObservable();
+    }
+
+    public setStatus(isOpen: boolean){
+        this.sidebar$.next(isOpen);
+    }
+
+    public toggle(){
+        this.sidebar$.next(!this.sidebar$.getValue());
+    }
+
+}

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html

@@ -81,32 +81,32 @@
 		<ng-container *ngIf="hasFocus">
 
 			<div class="row" *ngIf="showDescription">
-				<mat-form-field class="col p-0" appearance="legacy">
+				<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
 					<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
 					[formControl]="this.form.get('description')">
 				</mat-form-field>
 			</div>
 			<div class="row" *ngIf="showExtendedDescription">
-				<mat-form-field class="col p-0" appearance="legacy">
+				<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
 					<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
 					[formControl]="this.form.get('extendedDescription')"/>
 				</mat-form-field>
 			</div>
 			<div class="row" *ngIf="showAdditionalInfo">
-				<mat-form-field class="col p-0" appearance="legacy">
+				<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
 					<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
 					[formControl]="this.form.get('additionalInformation')"/>
 				</mat-form-field>
 			</div>
 	
 			<div class="row">
-				<mat-form-field *ngIf="isMultiplicityEnabled" class="col" appearance="legacy">
+				<mat-form-field *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field" appearance="legacy">
 					<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
 					type="number" [formControl]="form.get('multiplicity').get('min')" required>
 					<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-error>
 				</mat-form-field>
-				<mat-form-field *ngIf="isMultiplicityEnabled" class="col" appearance="legacy">
+				<mat-form-field *ngIf="isMultiplicityEnabled" class="col pr-0 underline-line-field" appearance="legacy">
 					<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
 					type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
 					<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@@ -258,7 +258,7 @@
 	<ng-container *ngIf="hasFocus">
 		<div class="row justify-content-end pt-2" >
 			<div class="col-auto">
-				<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center">
+				<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
 					<!-- <li class="list-inline-item" (click)="addNewField()"><mat-icon>folder</mat-icon> <small>Add input</small></li> -->
 
 
@@ -348,10 +348,10 @@
 
 					<!-- <li class="list-inline-item"><mat-icon>folder</mat-icon><small>CommentField</small></li> -->
 					<li class="list-inline-item">
-						<mat-checkbox [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
+						<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
 					</li>
 					<li class="list-inline-item">
-						<mat-checkbox [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
+						<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
 							{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
 						</mat-checkbox>
 					</li>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss

@@ -83,3 +83,16 @@ $blue-color-light: #5cf7f2;
 .numbering-label .mat-input-element:disabled{
     color: #212121;
 }
+
+:host ::ng-deep .fieldset-checkbox-action-dataset-profile-editor 
+{
+  .mat-checkbox-label{
+    font-size: 0.8em;
+    color: #212121;
+    transform: translateY(3px);
+  }
+}
+
+// ::ng-deep .underline-line-field .mat-form-field-appearance-legacy .mat-form-field-wapper{
+//     padding-bottom: 1.25em !important;
+// }

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html

@@ -5,7 +5,7 @@
 		<div class="col-auto">
 			<ul class="list-unstyled list-inline d-flex align-items-center">
 				<li class="list-inline-item"  >
-					<mat-slide-toggle [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!viewType">
+					<mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!viewType">
 						{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-slide-toggle>
 				</li>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss

@@ -14,7 +14,21 @@ mat-radio-button{
 }
 
 li.list-inline-item{
+  color: #129D99;
   .mat-icon{
     vertical-align: bottom;
   }
-}
+}
+
+:host   ::ng-deep .field-toggler 
+{
+  .mat-slide-toggle-content{
+  font-size: 0.8em;
+  color: #212121;
+  transform: translateY(3px);
+  }
+  .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
+    background-color:#129D99 ;
+  }
+}
+  

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html

@@ -59,27 +59,44 @@
 				</button>
 
 
-				<ng-container *ngIf="false">
+				<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
 				<!-- <ng-container *ngIf="stepper.selectedIndex === (steps.length-1)"> -->
 					<ng-container *ngIf="!viewOnly">
 						
-						<button mat-button class="navigate-btn ml-2"
+						<!-- <button mat-button class="navigate-btn ml-2"
 							(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
-							translate}}</button>
+							translate}}</button> -->
-						<button mat-button class="navigate-btn ml-2"
+						<!-- <button mat-button class="finalize-btn ml-2"
 							(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+							translate}}</button> -->
+					</ng-container>
+
+					<!-- //TODO -->
+					<ng-container *ngIf="true">
+						
+						<!-- <button mat-button class="navigate-btn ml-2"
+							(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+							translate}}</button> -->
+						<!-- <button mat-button class="finalize-btn ml-2"
+							(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+							translate}}</button> -->
+						<button mat-button class="finalize-btn ml-2"
+							[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
 							translate}}</button>
 					
 					</ng-container>
 					<!-- SAVE BUTTON  WHEN FINALIZED-->
-					<ng-container *ngIf="showUpdateButton()">
+
-						
+					<ng-container *ngIf="false">
-						<!-- <button mat-button class="navigate-btn ml-2"
+						<ng-container *ngIf="showUpdateButton()">
-							(click)='checkFormValidation()'
+							
-							[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
+							<!-- <button mat-button class="navigate-btn ml-2"
-						<button mat-button class="navigate-btn ml-2"
+								(click)='checkFormValidation()'
-							(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+								[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
-							translate}}</button>
+							<button mat-button class="navigate-btn ml-2"
+								(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+								translate}}</button>
+						</ng-container>
 					</ng-container>
 				</ng-container>
 
@@ -97,7 +114,7 @@
 					<div class="col-12">
 						<div class="heading">1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *</div>
 						<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME-HINT'| translate}}</div>
-						<mat-form-field class="full-width">
+						<mat-form-field class="full-width basic-info-input">
 							<input matInput formControlName="label"
 								placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
 							<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
@@ -109,9 +126,9 @@
 						<div class="heading">1.2 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION'| translate}} *</div>
 						<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
 						<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
-						<mat-form-field class="full-width">
+						<mat-form-field class="full-width basic-info-input">
-							<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="3" cdkAutosizeMaxRows="5"
+							<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="5"
-								placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required>
+								placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'| translate}}" required>
 							</textarea>
 							<mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED'
 								| translate}}
@@ -122,9 +139,9 @@
 					<div class="col-12">
 						<!-- <div class="heading">1.3 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div> -->
 						<div class="heading">1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}} *</div>
-						<mat-form-field class="full-width">
+						<mat-form-field class="full-width basic-info-input">
 							<!-- <input matInput formControlName="description" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required> -->
-							<mat-select formControlName="language">
+							<mat-select formControlName="language" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-SELECT-LANGUAGE'| translate}}">
 								<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
 									{{ lang.name }}
 								</mat-option>
@@ -354,7 +371,7 @@
 				</div>
 			</mat-step>
 			<mat-step [label]="'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate">
-				{{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}}
+				<!-- {{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}} -->
 				<!-- <button (click)="generatePreviewForm()">foo</button> -->
 				<ng-container *ngIf="form.get('sections')?.length">
 					<app-dataset-description [form]="previewForm" [visibilityRules]="visibilityRules" *ngIf="previewForm">

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss

@@ -106,15 +106,21 @@ color: #FFF;
 
 
 
-  $blue-color : #129D99;
+$blue-color : #129D99;
-  $blue-color-light: #5cf7f2;
+$blue-color-light: #5cf7f2;
 
+.finalize-btn {
+	border-radius: 30px;
+	border: 1px solid #129D99;
+	background: transparent;
+	padding-left: 2em;
+	padding-right: 2em;
+	box-shadow: 0px 3px 6px #1E202029;
+	color: #129D99;
+}
 
 
 
-// #DEDEDE
-
-
 
 .stepper-title-label{
 	cursor: pointer;
@@ -123,6 +129,7 @@ color: #FFF;
 	transition-delay: 50ms;
 	transition-timing-function: ease-in-out;
 	color: #212121;
+	font-size: 0.9em;
 }
 
 .stepper-title-label-locked{
@@ -168,6 +175,7 @@ color: #FFF;
 			font-size: 1.2em;
 			padding-right: 1em;
 			height: auto;
+			color: #129D99;;
 		}
 		.action-list-text{
 			font-size: 0.9em;;
@@ -186,4 +194,19 @@ color: #FFF;
 
 // .mli{
 // 	height: auto;
-// }
+// }
+
+
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+	background: #fafafa !important;
+}
+
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	font-size: 1rem;
+	padding: 0.6em 0 1em 0 !important;
+}
+
+.basic-info-input{
+	margin-top: 2em;
+	margin-bottom: 2em;
+}

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts

@@ -40,6 +40,7 @@ import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEdi
 import { Rule } from '@app/core/model/dataset-profile-definition/rule';
 import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
 import { invalid } from '@angular/compiler/src/render3/view/util';
+import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
 
 @Component({
@@ -86,14 +87,20 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		private enumUtils: EnumUtils,
 		private datasetWizardService: DatasetWizardService,
 		private visibilityRulesService: VisibilityRulesService,
-		private fb: FormBuilder
+		private fb: FormBuilder,
+		private sidenavService: SideNavService
 	) {
 		super();
 		// this.profileID = route.snapshot.params['id'];
 		// this.cloneId = route.snapshot.params['cloneid'];
 	}
 
+	ngOnDestroy(){
+		this.sidenavService.setStatus(true);
+	}
+
 	ngOnInit() {
+		this.sidenavService.setStatus(false);
 		this.matomoService.trackPageView('Admin: Dataset Profile Edit');
 		this.route.paramMap.pipe(takeUntil(this._destroyed)).subscribe((paramMap: ParamMap) => {
 			this.datasetProfileId = paramMap.get('id');

dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html

@@ -14,7 +14,7 @@
 
 	</div>
 	<div class="col-auto ml-lg-auto">
-		<mat-form-field class="search-form">
+		<mat-form-field class="status-form">
 			<input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike"
 				[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
 				<mat-icon matPrefix>search</mat-icon>

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html

@@ -3,7 +3,7 @@
 	<!-- <nav> -->
 	<!-- <a [href]="_rootUrl + '#' + link.id" -->
 
-	<h3>{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</h3>
+	<h3 id="guide-steps">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</h3>
 	<div class="scroll-container" id="style-2">
 		<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
 			<span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss

@@ -133,3 +133,10 @@ span {
   background-color: rgb(158, 158, 158);// #FFF;//$blue-color-light;// rgb(162, 163, 163);// #D62929;
 }
 
+
+#guide-steps{
+  color: #212121;
+  opacity: 0.6;
+  font-size: 1.6em;
+  margin-top: 0px;
+}

dmp-frontend/src/app/ui/dashboard/dashboard.component.scss

@@ -399,24 +399,24 @@ input[type="text"] {
     margin-left: 40px;
 }
 
-::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
+:host ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
 .mat-tab-nav-bar.mat-primary .mat-ink-bar {
 	background: #129d99;
 	height: 5px;
 }
 
-::ng-deep .mat-tab-label {
+:host ::ng-deep .mat-tab-label {
 	min-width: auto !important;
 	background-color: transparent;
 }
 
-::ng-deep .mat-tab-label.mat-tab-label-active {
+:host ::ng-deep .mat-tab-label.mat-tab-label-active {
 	min-width: auto !important;
 	background-color: transparent;
 	font-weight: 700;
 }
 
-::ng-deep .mat-form-field-wrapper {
+:host ::ng-deep .mat-form-field-wrapper {
 	background-color: white !important;
 	padding-bottom: 0 !important;
 }

dmp-frontend/src/app/ui/navbar/navbar.component.html

@@ -2,7 +2,7 @@
 	<nav class="navbar navbar-expand-lg fixed-navbar">
 		<div class="container-fluid">
 
-			<div class="hamburger change" id="hamburger" (click)="sidebarToggleOutput($event)">
+			<div class="hamburger change" id="hamburger" (click)="toggleMyNav($event)">
 				<div class="icon-bar1"></div>
 				<div class="icon-bar2"></div>
 				<div class="icon-bar3"></div>

dmp-frontend/src/app/ui/navbar/navbar.component.ts

@@ -18,6 +18,7 @@ import { UserListingModel } from '@app/core/model/user/user-listing';
 import { Principal } from '@app/core/model/auth/principal';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { HttpClient } from '@angular/common/http';
+import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
 
 const availableLanguages: any[] = require('../../../assets/resources/language.json');
 
@@ -50,7 +51,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		private languageService: LanguageService,
 		public userService: UserService,
 		private httpClient: HttpClient,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private sidenavService: SideNavService
 	) {
 		super();
 		this.location = location;
@@ -260,6 +262,10 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		this.sidebarToggled.emit(event);
 	}
 
+	toggleMyNav(event){
+		this.sidenavService.toggle();
+	}
+
 	openNewDmpDialog() {
 		if (this.dialog.openDialogs.length > 0) {
 			this.dialog.closeAll();

dmp-frontend/src/assets/i18n/de.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/assets/i18n/en.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/assets/i18n/es.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/assets/i18n/gr.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/assets/i18n/pt.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/assets/i18n/sk.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/assets/i18n/sr.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/assets/i18n/tr.json

@@ -288,6 +288,8 @@
 				"DATASET-TEMPLATE-DESCRIPTION": "Description",
 				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled"
 			},
 			"PAGE-INFO": {

dmp-frontend/src/styles.scss

@@ -242,3 +242,8 @@
 		border-radius: 0;
 	}
 }
+
+
+.text-primary-blue{
+	color: #129D99;
+}