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