Fix sidebar toggle behavior

src/app/app.component.css

@@ -1,52 +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: 100%;
+.menu-btn {
+  margin-right: 4px;
+  transition: all 0.2s ease;
 }
-
-.sidenav-content {
-  display: flex;
-  padding: 10px;
-  justify-content: space-between;
+.menu-btn:hover {
+  background: rgba(0,0,0,0.04);
+  transform: scale(1.05);
 }
-
-.sidenav-menu {
-  padding: 20px;
+.spacer {
+  flex: 1 1 auto;
 }
-
-.menu-close {
-  position: absolute;
-  right: 0;
-  top: 2px;
-  background: transparent;
-  border: 0;
-  color: #ddd;
-}
-
-.github-fork-ribbon:before {
-  background-color: #333;
+.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) {
-    .github-fork-ribbon {
+@media (max-width: 768px) {
+  .title-container {
+    font-size: 14px;
+  }
+  .tag-title {
+    font-size: 14px;
+  }
+  .tag-subtitle {
+    font-size: 11px;
+  }
+  .github-fork-ribbon {
         display: none;
       }
-
-}
+  .logo,
+  .logo-icon {
+    opacity: 0;
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+}

src/app/app.component.html

@@ -1,30 +1,35 @@
-<mat-drawer-container class="main-container" autosize>
-  <mat-drawer #drawer class="sidenav-menu" mode="side" opened="{{ menuIsOpen }}">
-    <button class="menu-close" (click)="toggleMenu()">
-      <mat-icon class="white-icon">close</mat-icon>
-    </button>
-    <a routerLink="/"><app-logo></app-logo></a>
-    <app-sidenav-buttons></app-sidenav-buttons>
-  </mat-drawer>
-
-  <div class="sidenav-content">
-    <button type="button" mat-button (click)="toggleMenu()" color="primary">
-      <mat-icon>menu</mat-icon>
-    </button>
+<mat-toolbar class="mat-elevation-z2 navbar">
+  <button mat-icon-button (click)="toggleMenu()" class="menu-btn">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <a routerLink="/" class="logo">
+    <app-logo class="logo-icon"></app-logo>
+  </a>
+  <div class="title-container">
     <div class="tag-line">
-      <div class="tag-title">{{ title || defaultTitle }}</div>
-      <div class="tag-subtitle">{{ subtitle }}</div>
+      <div class="tag-title">
+        {{ title || defaultTitle }}
+      </div>
+      <div class="tag-subtitle" *ngIf="subtitle">
+        {{ subtitle }}
+      </div>
     </div>
-    <div class="dummy"></div>
-    <a
-      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</a
-    >
   </div>
-  <mat-divider></mat-divider>
-  <router-outlet></router-outlet>
-</mat-drawer-container>
+  <span class="spacer"></span>
+  <a
+    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
+  </a>
+</mat-toolbar>
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">
+    <app-sidenav-buttons></app-sidenav-buttons>
+  </mat-sidenav>
+  <mat-sidenav-content class="content" [style.margin-left]="sidenavWidth">
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/app.component.spec.ts

@@ -1,15 +1,45 @@
 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<AppComponent>;
 
   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 +54,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');
   });
 });

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<void>();
 
@@ -25,7 +26,10 @@ 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
@@ -42,6 +46,7 @@ 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());
   }
 }

src/app/app.module.ts

@@ -1,6 +1,7 @@
 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';
@@ -62,6 +63,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
     MaterialModule,
     MatDialogModule,
     ReactiveFormsModule,
+    MatToolbarModule,
     FormsModule,
     HttpClientModule,
     TeamsGroupsEditorModule,