Remove scrollbar for header in mobile screen

axonivy-market · Sep 9, 2024 · 134f3dd · 134f3dd
1 parent d72433d
commit 134f3dd
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 55 deletions.
diff --git a/marketplace-ui/src/app/app.component.html b/marketplace-ui/src/app/app.component.html
@@ -1,25 +1,32 @@
-@if(!routingQueryParamService.isDesignerEnv()){
-<header class="d-flex align-items-center">
-  <div class="container">
-    <app-header></app-header>
-  </div>
-</header>
-}
-<main>
-  <div class="container">
-    <router-outlet />
-  </div>
-</main>
-@if(!routingQueryParamService.isDesignerEnv()){
-<footer>
-  <div class="container">
-    <app-footer></app-footer>
-  </div>
-</footer>
-}
+<div class="app-container"
+  [ngClass]="
+    headerClass === 'header-mobile'
+      ? 'header-mobile-container'
+      : ''
+  ">
+  @if (!routingQueryParamService.isDesignerEnv()) {
+    <header class="d-flex align-items-center" [ngClass]="headerClass">
+      <div class="container">
+        <app-header (isHeaderMenuShown)="toggleMobileHeader($event)"></app-header>
+      </div>
+    </header>
+  }
+  <main>
+    <div class="container">
+      <router-outlet />
+    </div>
+  </main>
+  @if (!routingQueryParamService.isDesignerEnv()) {
+    <footer>
+      <div class="container">
+        <app-footer></app-footer>
+      </div>
+    </footer>
+  }
 
-@if (loadingService.isLoading()) {
-<div class="spinner-container">
-  <div class="spinner-border"></div>
+  @if (loadingService.isLoading()) {
+    <div class="spinner-container">
+      <div class="spinner-border"></div>
+    </div>
+  }
 </div>
-}
diff --git a/marketplace-ui/src/app/app.component.scss b/marketplace-ui/src/app/app.component.scss
@@ -42,3 +42,19 @@ footer {
   width: 4rem;
   height: 4rem;
 }
+
+.header-mobile {
+  z-index: 1;
+  position: absolute;
+  background: var(--info-dropdown-bg);
+  top: 0;
+  left: 0;
+  width: 100vw;
+}
+
+.header-mobile-container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
diff --git a/marketplace-ui/src/app/app.component.spec.ts b/marketplace-ui/src/app/app.component.spec.ts
@@ -7,13 +7,15 @@ import { RoutingQueryParamService } from './shared/services/routing.query.param.
 import { ActivatedRoute, RouterOutlet, NavigationStart } from '@angular/router';
 import { of, Subject } from 'rxjs';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 
 describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
   let routingQueryParamService: jasmine.SpyObj<RoutingQueryParamService>;
   let activatedRoute: ActivatedRoute;
   let navigationStartSubject: Subject<NavigationStart>;
+  let appElement: HTMLElement;
 
   beforeEach(async () => {
     navigationStartSubject = new Subject<NavigationStart>();
@@ -64,6 +66,9 @@ describe('AppComponent', () => {
     routingQueryParamService.getNavigationStartEvent.and.returnValue(
       navigationStartSubject.asObservable()
     );
+    appElement = fixture.debugElement.query(
+      By.css('.app-container')
+    ).nativeElement;
   });
 
   it('should create the app', () => {
@@ -104,4 +109,26 @@ describe('AppComponent', () => {
       routingQueryParamService.checkCookieForDesignerVersion
     ).not.toHaveBeenCalled();
   });
+
+  it('should hide scrollbar when burger menu is opened', () => {
+    component.toggleMobileHeader(false);
+    fixture.detectChanges();
+
+    expect(component.headerClass).toBe('header-mobile');
+    expect(appElement.classList.contains('header-mobile-container')).toBeTrue();
+
+    const headerComputedStyle = window.getComputedStyle(appElement);
+    expect(headerComputedStyle.overflow).toBe('hidden');
+  });
+
+  it('should reset header style when burger menu is closed', () => {
+    component.toggleMobileHeader(true);
+    fixture.detectChanges();
+
+    expect(component.headerClass).toBe('');
+    expect(appElement.classList.contains('header-mobile')).toBeFalse();
+    expect(
+      appElement.classList.contains('header-mobile-container')
+    ).toBeFalse();
+  });
 });
diff --git a/marketplace-ui/src/app/app.component.ts b/marketplace-ui/src/app/app.component.ts
@@ -1,14 +1,15 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { RouterOutlet, ActivatedRoute } from '@angular/router';
 import { FooterComponent } from './shared/components/footer/footer.component';
 import { HeaderComponent } from './shared/components/header/header.component';
 import { LoadingService } from './core/services/loading/loading.service';
 import { RoutingQueryParamService } from './shared/services/routing.query.param.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent, FooterComponent],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent, CommonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
@@ -17,6 +18,8 @@ export class AppComponent {
   routingQueryParamService = inject(RoutingQueryParamService);
   route = inject(ActivatedRoute);
 
+  @Input() headerClass = '';
+
   constructor() {}
 
   ngOnInit(): void {
@@ -29,4 +32,8 @@ export class AppComponent {
       }
     });
   }
+
+  toggleMobileHeader(isMobileMenuCollapsed: boolean) {
+    this.headerClass = isMobileMenuCollapsed ? '' : 'header-mobile';
+  }
 }
diff --git a/marketplace-ui/src/app/shared/components/header/header.component.html b/marketplace-ui/src/app/shared/components/header/header.component.html
@@ -1,5 +1,5 @@
-<nav class="navbar navbar-expand-xl" [ngClass]="!isMobileMenuCollapsed() ? 'navbar-mobile' : ''">
-  <div class="container-fluid here" [ngClass]="!isMobileMenuCollapsed() ? 'container-mobile' : ''">
+<nav class="navbar navbar-expand-xl">
+  <div class="container-fluid">
     <a href="/" class="logo navbar-brand">
       <img
         class="logo__image"

diff --git a/marketplace-ui/src/app/shared/components/header/header.component.scss b/marketplace-ui/src/app/shared/components/header/header.component.scss
@@ -2,31 +2,6 @@
   opacity: 0px;
 }
 
-.navbar-mobile {
-  z-index: 1;
-  background-color: red;
-  // padding-bottom: 30px;
-  transition: 0.5s;
-  // overflow: hidden;
-  height: 100vh;
-  position: fixed;
-  overflow-x: hidden;
-  z-index: 1;
-  background-color: red;
-  padding-bottom: 30px;
-  transition: 0.5s;
-  overflow: hidden;  /* Prevents content from overflowing */
-  height: auto;  /* Allows the menu to adjust its height */
-  position: relative; /* Positioning is relative to its container */
-}
-
-.container-mobile {
-  background-color: pink;
-  position: relative;
-  width: 100%;
-  // margin-top: 30px;
-}
-
 .navbar-brand {
   padding-top: 0.8rem;
 }

diff --git a/marketplace-ui/src/app/shared/components/header/header.component.ts b/marketplace-ui/src/app/shared/components/header/header.component.ts
@@ -1,5 +1,12 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject, signal, WritableSignal } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  inject,
+  Output,
+  signal,
+  WritableSignal
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../core/services/language/language.service';
@@ -25,6 +32,8 @@ import { ThemeSelectionComponent } from './theme-selection/theme-selection.compo
   styleUrls: ['./header.component.scss', '../../../app.component.scss']
 })
 export class HeaderComponent {
+  @Output() isHeaderMenuShown = new EventEmitter<boolean>();
+
   selectedNav = '/';
 
   isMobileMenuCollapsed: WritableSignal<boolean> = signal(true);
@@ -42,5 +51,6 @@ export class HeaderComponent {
 
   onCollapsedMobileMenu() {
     this.isMobileMenuCollapsed.update(value => !value);
+    this.isHeaderMenuShown.emit(this.isMobileMenuCollapsed());
   }
 }
diff --git a/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.html b/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.html
@@ -70,8 +70,7 @@
       </button>
       <button
         [lang]="languageService.selectedLanguage()"
-        class="btn btn-primary header__download-button border-0 w-100 rounded-3 d-lg-none"
-        [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
+        class="btn btn-primary header__download-button border-0 w-100 rounded-3 d-lg-none">
         {{ 'common.downloadLatestLTSVersion' | translate }}
       </button>
     </li>

diff --git a/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.spec.ts b/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.spec.ts
@@ -71,4 +71,42 @@ describe('SearchBarComponent', () => {
       'none'
     );
   });
+
+  it('should display the correct text in large screen', () => {
+    viewport.set(1920);
+    fixture.detectChanges();
+
+    const largeScreenButton = fixture.debugElement.query(
+      By.css('.d-none.d-lg-block')
+    ).nativeElement;
+    const smallScreenButton = fixture.debugElement.query(
+      By.css('.d-lg-none')
+    ).nativeElement;
+
+    expect(getComputedStyle(largeScreenButton).display).not.toBe('none');
+    expect(getComputedStyle(smallScreenButton).display).toBe('none');
+
+    expect(largeScreenButton.textContent.trim()).toContain(
+      'common.header.download'
+    );
+  });
+
+  it('should display the correct text in smaller screen', () => {
+    viewport.set(430);
+    fixture.detectChanges();
+
+    const smallScreenButton = fixture.debugElement.query(
+      By.css('.d-lg-none')
+    ).nativeElement;
+    const largeScreenButton = fixture.debugElement.query(
+      By.css('.d-none.d-lg-block')
+    ).nativeElement;
+
+    expect(getComputedStyle(smallScreenButton).display).not.toBe('none');
+    expect(getComputedStyle(largeScreenButton).display).toBe('none');
+
+    expect(smallScreenButton.textContent.trim()).toContain(
+      'common.downloadLatestLTSVersion'
+    );
+  });
 });