components/nav-config/nav-config.component.ts

0001 import {Component, HostListener} from '@angular/core';
0002 import {RouterLink, RouterOutlet} from "@angular/router";
0003 import {MatIcon} from "@angular/material/icon";
0004 import {NgIf} from "@angular/common";
0005 import {MatIconButton} from "@angular/material/button";
0006 import {MatTooltip} from "@angular/material/tooltip";
0007 import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
0008 import { MatIconRegistry } from '@angular/material/icon';
0009 import { DomSanitizer } from '@angular/platform-browser';
0010 import packageInfo from '../../../../package.json';
0011
0012 @Component({
0013   selector: 'app-nav-config',
0014   standalone: true,
0015   imports: [
0016     RouterOutlet,
0017     RouterLink,
0018     MatIcon,
0019     NgIf,
0020     MatIconButton,
0021     MatTooltip,
0022     MatMenu,
0023     MatMenuItem,
0024     MatMenuTrigger
0025   ],
0026   templateUrl: './nav-config.component.html',
0027   styleUrl: './nav-config.component.scss'
0028 })
0029 export class NavConfigComponent {
0030   isNavConfigOpen: boolean = false;
0031   isSmallScreen: boolean = window.innerWidth < 992;
0032   packageVersion: string;
0033
0034   constructor(private matIconRegistry: MatIconRegistry,
0035               private domSanitizer: DomSanitizer) {
0036     this.matIconRegistry.addSvgIcon(
0037       'github',
0038       this.domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/github-mark-white.svg')
0039     );
0040     this.packageVersion = packageInfo.version;
0041   }
0042
0043   @HostListener('window:resize', ['$event'])
0044   onResize(event: any) {
0045     this.isSmallScreen = event.target.innerWidth < 768;
0046     if (!this.isSmallScreen) {
0047       this.isNavConfigOpen = true;
0048     }
0049   }
0050
0051   toggleNavConfig() {
0052     this.isNavConfigOpen = !this.isNavConfigOpen;
0053   }
0054 }