grassrootseconomics/cic-staff-client
5
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

Add handling for responsive sidebar content.

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-03-04 12:35:20 +03:00
parent 0fb597efdd
commit 70fe7cf08e
3 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/app.component.ts
View File

@ -1,4 +1,4 @@
import {Component, HostListener, OnInit} from '@angular/core'; import {Component, HostListener} from '@angular/core';
import {TransactionService} from '@app/_services'; import {TransactionService} from '@app/_services';
import {AuthService} from '@app/_services'; import {AuthService} from '@app/_services';
@ -7,7 +7,7 @@ import {AuthService} from '@app/_services';
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit { export class AppComponent {
title = 'CICADA'; title = 'CICADA';
readyStateTarget: number = 3; readyStateTarget: number = 3;
readyState: number = 0; readyState: number = 0;
@ -18,9 +18,6 @@ export class AppComponent implements OnInit {
private transactionService: TransactionService, private transactionService: TransactionService,
) { ) {
this.authService.mutableKeyStore.loadKeyring().then(r => this.authService.getPublicKeys().then()); this.authService.mutableKeyStore.loadKeyring().then(r => this.authService.getPublicKeys().then());
}
ngOnInit(): void {
this.mediaQuery.addListener(this.onResize); this.mediaQuery.addListener(this.onResize);
this.onResize(this.mediaQuery); this.onResize(this.mediaQuery);
} }
@ -30,13 +27,23 @@ export class AppComponent implements OnInit {
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
const content = document.getElementById('content'); const content = document.getElementById('content');
const sidebarCollapse = document.getElementById('sidebarCollapse'); const sidebarCollapse = document.getElementById('sidebarCollapse');
sidebarCollapse?.classList.remove('active'); if (sidebarCollapse?.classList.contains('active')) {
sidebarCollapse?.classList.remove('active');
}
if (e.matches) { if (e.matches) {
sidebar?.classList.add('active'); if (!sidebar?.classList.contains('active')) {
content?.classList.add('active'); sidebar?.classList.add('active');
}
if (!content?.classList.contains('active')) {
content?.classList.add('active');
}
} else { } else {
sidebar?.classList.remove('active'); if (sidebar?.classList.contains('active')) {
content?.classList.remove('active'); sidebar?.classList.remove('active');
}
if (content?.classList.contains('active')) {
content?.classList.remove('active');
}
} }
} }

12
src/app/shared/_directives/menu-selection.directive.ts
View File

@ -19,10 +19,16 @@ export class MenuSelectionDirective {
onMenuSelect(): void { onMenuSelect(): void {
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
sidebar.classList.add('active'); if (!sidebar?.classList.contains('active')) {
sidebar?.classList.add('active');
}
const content = document.getElementById('content'); const content = document.getElementById('content');
content.classList.add( 'active'); if (!content?.classList.contains('active')) {
content?.classList.add('active');
}
const sidebarCollapse = document.getElementById('sidebarCollapse'); const sidebarCollapse = document.getElementById('sidebarCollapse');
sidebarCollapse.classList.remove('active'); if (sidebarCollapse?.classList.contains('active')) {
sidebarCollapse?.classList.remove('active');
}
} }
} }

6
src/app/shared/_directives/menu-toggle.directive.ts
View File

@ -17,10 +17,10 @@ export class MenuToggleDirective {
// Menu Trigger // Menu Trigger
onMenuToggle(): void { onMenuToggle(): void {
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('active'); sidebar?.classList.toggle('active');
const content = document.getElementById('content'); const content = document.getElementById('content');
content.classList.toggle('active'); content?.classList.toggle('active');
const sidebarCollapse = document.getElementById('sidebarCollapse'); const sidebarCollapse = document.getElementById('sidebarCollapse');
sidebarCollapse.classList.toggle('active'); sidebarCollapse?.classList.toggle('active');
} }
} }