Added expand and collapse functionality

This commit is contained in:
Yasa-Nataliya
2023-02-09 17:40:52 +00:00
committed by Sheena Malhotra
parent 9734d1606a
commit a00ebef5cc
14 changed files with 122 additions and 26 deletions

View File

@@ -1,8 +1,8 @@
<div class="sidenav">
<div class="sidenav" *ngIf="!hideSidenav">
<ng-container [ngSwitch]="mode">
<div class="sidenav-header">
<div class="sidenav-header-title">
<div class="sidenav-header-title-logo">
<div class="sidenav-header-title-logo" (click)="toggleClick()">
<mat-icon svgIcon="workspace"
title="{{'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate}}"></mat-icon>
</div>

View File

@@ -30,6 +30,7 @@ import { AppStore, getSideNavState } from '@alfresco/aca-shared/store';
import { Subject } from 'rxjs';
import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { AppExtensionService } from '@alfresco/aca-shared';
import { ContentServiceExtensionService } from '../../services/content-service-extension.service';
@Component({
selector: 'app-sidenav',
@@ -41,11 +42,12 @@ import { AppExtensionService } from '@alfresco/aca-shared';
export class SidenavComponent implements OnInit, OnDestroy {
@Input()
mode: 'collapsed' | 'expanded' = 'expanded';
hideSidenav: boolean;
groups: Array<NavBarGroupRef> = [];
private onDestroy$ = new Subject<boolean>();
constructor(private store: Store<AppStore>, private extensions: AppExtensionService) {}
constructor(private store: Store<AppStore>, private extensions: AppExtensionService, private contentServices: ContentServiceExtensionService) {}
ngOnInit() {
this.store
@@ -54,6 +56,7 @@ export class SidenavComponent implements OnInit, OnDestroy {
.subscribe(() => {
this.groups = this.extensions.getApplicationNavigation(this.extensions.navbar);
});
this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
}
trackByGroupId(_: number, obj: NavBarGroupRef): string {
@@ -64,6 +67,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
return obj.id;
}
toggleClick() {
this.hideSidenav = !this.hideSidenav;
this.contentServices.push(this.hideSidenav);
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();

View File

@@ -1,4 +1,4 @@
<div class="app-profile-container">
<div class="app-profile-container" [ngClass]="{'app-view-profile-container' : hideSidenav === true}">
<div class="app-profile-row">
<div class="app-profile-title">
<mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>

View File

@@ -191,4 +191,14 @@ app-view-profile {
padding-top: 2rem;
padding-left: .5rem;
}
.app-view-profile-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
bottom: 0;
right: 0;
height: 100%;
}
}

View File

@@ -11,6 +11,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { throwError } from 'rxjs';
import { ContentServiceExtensionService } from '../../services/content-service-extension.service';
@Component({
selector: 'app-view-profile',
@@ -33,8 +34,9 @@ export class ViewProfileComponent implements OnInit {
contactSectionDropdown = false;
contactSectionButtonsToggle = true;
hideSidenav: boolean;
constructor(private router: Router, apiService: AlfrescoApiService) {
constructor(private router: Router, apiService: AlfrescoApiService, private contentServices: ContentServiceExtensionService) {
this.peopleApi = new PeopleApi(apiService.getInstance());
}
@@ -49,6 +51,7 @@ export class ViewProfileComponent implements OnInit {
.catch((error) => {
throwError(error);
});
this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
}
populateForm(userInfo: Person) {