From 087ffefefc103643272c9acb06a578196d4d6ad8 Mon Sep 17 00:00:00 2001 From: keshav lath Date: Tue, 10 Feb 2026 09:51:22 +0530 Subject: [PATCH 1/5] fix sidebar toggle --- src/app/app.component.css | 18 ++++++++++++------ src/app/app.component.html | 17 ++++++----------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index cda929a0..57232027 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -7,9 +7,11 @@ flex-direction: column; align-items: center; } + .tag-title { font-size: 0.9em; } + .tag-subtitle { font-size: 0.7em; } @@ -18,13 +20,16 @@ .main-container { width: 100%; - height: 100%; + height: 100vh; } .sidenav-content { display: flex; padding: 10px; justify-content: space-between; + width: 100%; + min-height: 60px; + box-sizing: border-box; } .sidenav-menu { @@ -38,6 +43,7 @@ background: transparent; border: 0; color: #ddd; + cursor: pointer; } .github-fork-ribbon:before { @@ -45,8 +51,8 @@ } @media only screen and (max-width: 750px) { - .github-fork-ribbon { - display: none; - } - -} + .github-fork-ribbon { + display: none; + } + +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 5cd4c170..dd10f1cb 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - + @@ -8,7 +8,7 @@
-
@@ -16,15 +16,10 @@
{{ subtitle }}
- Fork me on GitHub + Fork me on GitHub
- + \ No newline at end of file From 120e8b6f127fe84a3c633b88dd5ac693188a8e99 Mon Sep 17 00:00:00 2001 From: keshav lath Date: Tue, 10 Feb 2026 10:21:23 +0530 Subject: [PATCH 2/5] fix linting issues --- src/app/app.component.html | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index dd10f1cb..a13fac02 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -16,10 +16,15 @@
{{ subtitle }}
- Fork me on GitHub + + Fork me on GitHub + - \ No newline at end of file + From df0f98c9134f70ca43c21edd0044cae28527228c Mon Sep 17 00:00:00 2001 From: keshav lath Date: Tue, 17 Feb 2026 09:47:24 +0530 Subject: [PATCH 3/5] fix navbar and sidenav layout --- src/app/app.component.css | 131 ++++++++++++++++++++++++------------- src/app/app.component.html | 55 +++++++++------- src/app/app.component.ts | 8 +++ src/app/app.module.ts | 7 +- 4 files changed, 132 insertions(+), 69 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index 57232027..1dc6a305 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,58 +1,99 @@ -/* --- experimental branch --- */ -/* .mat-drawer-container { - background-color: #fffff4; -} */ -.tag-line { +.navbar { + position: sticky; + top: 0; + z-index: 5; + padding: 0 16px; + display: flex; + align-items: center; + height: 64px; + transition: all 0.25s ease; +} +.logo { + display: flex; + align-items: center; + justify-content: flex-start; + text-decoration: none; + margin-left: -4px; + height: 100%; +} +.logo-icon { + transform: scale(0.95); + transform-origin: left center; + width: auto; + display: block; + margin: auto 0; +} +.title-container { + position: absolute; + left: 50%; + transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; + text-align: center; + animation: fadeSlide 0.4s ease; + margin-top: 4px; + gap: 3px; } - .tag-title { - font-size: 0.9em; + font-size: 0.85em; + font-weight: 500; + line-height: 1; + letter-spacing: 0.04em; } - .tag-subtitle { - font-size: 0.7em; + font-size: 0.65em; + margin-top: 0; + letter-spacing: 0.08em; + opacity: 0.6; +} +.github-fork-ribbon::before { + background-color: #333; } - -/* --- experimental branch end --- */ - -.main-container { - width: 100%; - height: 100vh; +.menu-btn { + margin-right: 4px; + transition: all 0.2s ease; } - -.sidenav-content { - display: flex; - padding: 10px; - justify-content: space-between; - width: 100%; - min-height: 60px; - box-sizing: border-box; -} - -.sidenav-menu { - padding: 20px; -} - -.menu-close { - position: absolute; - right: 0; - top: 2px; - background: transparent; - border: 0; - color: #ddd; - cursor: pointer; -} - -.github-fork-ribbon:before { - background-color: #333; +.menu-btn:hover { + background: rgba(0,0,0,0.04); + transform: scale(1.05); +} +.spacer { + flex: 1 1 auto; +} +.content { + padding: 24px; + animation: fadeSlide 1s ease; +} +@keyframes fadeSlide { + from { + opacity: 0; + transform: translateY(-5px); + } + to { + opacity: 1; + transform: translateY(0); + } } - -@media only screen and (max-width: 750px) { +@media (max-width: 768px) { + .title-container { + font-size: 14px; + } + .tag-title { + font-size: 14px; + } + .tag-subtitle { + font-size: 11px; + } .github-fork-ribbon { - display: none; + display: none; + } + .logo, + .logo-icon { + opacity: 0; + visibility: hidden; + width: 0; + margin: 0; + overflow: hidden; } - } \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index a13fac02..f97b1364 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,22 +1,22 @@ - - - - - - - -
- -
-
{{ title || defaultTitle }}
-
{{ subtitle }}
+ + + +
+
+
+ {{ title || defaultTitle }} +
+
+ {{ subtitle }}
-
- +
+ + Fork me on GitHub -
- - - + + + + + + + + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 045bfaff..a8dc30db 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -13,6 +13,7 @@ export class AppComponent implements OnInit, OnDestroy { defaultTitle = ''; subtitle = ''; menuIsOpen: boolean = true; + sidenavWidth: string = '250px'; private destroy$ = new Subject(); @@ -25,8 +26,13 @@ export class AppComponent implements OnInit, OnDestroy { if (menuState === 'false') { setTimeout(() => { this.menuIsOpen = false; + this.sidenavWidth = '0px'; }, 600); } + else { + this.sidenavWidth = '250px'; + } + // Subscribe to title changes this.titleService.titleInfo$.pipe(takeUntil(this.destroy$)).subscribe(titleInfo => { @@ -42,6 +48,8 @@ export class AppComponent implements OnInit, OnDestroy { toggleMenu(): void { this.menuIsOpen = !this.menuIsOpen; + this.sidenavWidth = this.menuIsOpen ? '250px' : '0px'; localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString()); } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4210172c..30e18d7a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,11 +1,13 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { MatToolbarModule } from '@angular/material/toolbar'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MaterialModule } from './material/material.module'; +import { MaterialModule } from +'./material/material.module'; import { CircularHeatmapComponent } from './pages/circular-heatmap/circular-heatmap.component'; import { MatrixComponent } from './pages/matrix/matrix.component'; import { MappingComponent } from './pages/mapping/mapping.component'; @@ -62,6 +64,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g MaterialModule, MatDialogModule, ReactiveFormsModule, + MatToolbarModule, FormsModule, HttpClientModule, TeamsGroupsEditorModule, @@ -74,4 +77,4 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g ], bootstrap: [AppComponent], }) -export class AppModule {} +export class AppModule {} \ No newline at end of file From dab8326bdacffbf9b272fcd42318e35c724f4b60 Mon Sep 17 00:00:00 2001 From: keshav lath Date: Tue, 17 Feb 2026 10:09:34 +0530 Subject: [PATCH 4/5] fix unit test and linting issues --- src/app/app.component.html | 42 +++++++++++++++-------------------- src/app/app.component.spec.ts | 42 ++++++++++++++++++++++++++++++----- src/app/app.component.ts | 11 ++++----- src/app/app.module.ts | 5 ++--- 4 files changed, 60 insertions(+), 40 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index f97b1364..ba0734ca 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,39 +3,33 @@ menu -
-
-
- {{ title || defaultTitle }} +
+
+
+ {{ title || defaultTitle }} +
+
+ {{ subtitle }} +
-
- {{ subtitle }} -
-
- Fork me on GitHub - + target="_blank" + class="github-fork-ribbon" + href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel" + data-ribbon="Fork me on GitHub" + title="Fork me on GitHub"> + Fork me on GitHub + - + - + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 6cf17ff2..58610657 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,15 +1,46 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { of } from 'rxjs'; +import { ThemeService } from './service/theme.service'; +import { TitleService } from './service/title.service'; + +class MockThemeService { + initTheme() {} +} + +class MockTitleService { + titleInfo$ = of({ + dimension: 'Test Title', + level: '1' + }); +} describe('AppComponent', () => { + let app: AppComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [RouterTestingModule], declarations: [AppComponent], + imports: [ + RouterTestingModule, + MatToolbarModule, + MatIconModule, + MatSidenavModule, + BrowserAnimationsModule + ], + providers: [ + { provide: ThemeService, useClass: MockThemeService }, + { provide: TitleService, useClass: MockTitleService } + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }).compileComponents(); }); @@ -24,10 +55,9 @@ describe('AppComponent', () => { }); it('check for fork me on github ribbon generation', () => { - const fixture = TestBed.createComponent(AppComponent); - const HTMLElement: HTMLElement = fixture.nativeElement; - var divTag = HTMLElement.querySelector('div')!; - var aTag = divTag.querySelector('a')!; - expect(aTag.textContent).toContain('GitHub'); + const compiled = fixture.nativeElement as HTMLElement; + const githubLink = compiled.querySelector('.github-fork-ribbon'); + expect(githubLink).not.toBeNull(); + expect(githubLink?.textContent?.trim()).toBe('Fork me on GitHub'); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a8dc30db..35334189 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -26,13 +26,11 @@ export class AppComponent implements OnInit, OnDestroy { if (menuState === 'false') { setTimeout(() => { this.menuIsOpen = false; - this.sidenavWidth = '0px'; + this.sidenavWidth = '0px'; }, 600); + } else { + this.sidenavWidth = '250px'; } - else { - this.sidenavWidth = '250px'; - } - // Subscribe to title changes this.titleService.titleInfo$.pipe(takeUntil(this.destroy$)).subscribe(titleInfo => { @@ -48,8 +46,7 @@ export class AppComponent implements OnInit, OnDestroy { toggleMenu(): void { this.menuIsOpen = !this.menuIsOpen; - this.sidenavWidth = this.menuIsOpen ? '250px' : '0px'; + this.sidenavWidth = this.menuIsOpen ? '250px' : '0px'; localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString()); } - } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 30e18d7a..435bd2d2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,8 +6,7 @@ import { MatToolbarModule } from '@angular/material/toolbar'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MaterialModule } from -'./material/material.module'; +import { MaterialModule } from './material/material.module'; import { CircularHeatmapComponent } from './pages/circular-heatmap/circular-heatmap.component'; import { MatrixComponent } from './pages/matrix/matrix.component'; import { MappingComponent } from './pages/mapping/mapping.component'; @@ -77,4 +76,4 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g ], bootstrap: [AppComponent], }) -export class AppModule {} \ No newline at end of file +export class AppModule {} From 6bbaf94df6d785afc8fc4558382277b4de1c4e2d Mon Sep 17 00:00:00 2001 From: keshav lath Date: Tue, 17 Feb 2026 10:50:27 +0530 Subject: [PATCH 5/5] fix linting issues --- src/app/app.component.spec.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 58610657..eb72a4c3 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -17,12 +17,11 @@ class MockThemeService { class MockTitleService { titleInfo$ = of({ dimension: 'Test Title', - level: '1' + level: '1', }); } describe('AppComponent', () => { - let app: AppComponent; let fixture: ComponentFixture; @@ -34,13 +33,13 @@ describe('AppComponent', () => { MatToolbarModule, MatIconModule, MatSidenavModule, - BrowserAnimationsModule + BrowserAnimationsModule, ], providers: [ { provide: ThemeService, useClass: MockThemeService }, - { provide: TitleService, useClass: MockTitleService } + { provide: TitleService, useClass: MockTitleService }, ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] + schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); });