From 134f3dda23fab57c26586685f68c5623038e01c7 Mon Sep 17 00:00:00 2001 From: nntthuy-axonivy Date: Mon, 9 Sep 2024 11:39:09 +0700 Subject: [PATCH] Remove scrollbar for header in mobile screen --- marketplace-ui/src/app/app.component.html | 53 +++++++++++-------- marketplace-ui/src/app/app.component.scss | 16 ++++++ marketplace-ui/src/app/app.component.spec.ts | 27 ++++++++++ marketplace-ui/src/app/app.component.ts | 11 +++- .../components/header/header.component.html | 4 +- .../components/header/header.component.scss | 25 --------- .../components/header/header.component.ts | 12 ++++- .../search-bar/search-bar.component.html | 3 +- .../search-bar/search-bar.component.spec.ts | 38 +++++++++++++ 9 files changed, 134 insertions(+), 55 deletions(-) diff --git a/marketplace-ui/src/app/app.component.html b/marketplace-ui/src/app/app.component.html index 4bce97dd2..d06cf2663 100644 --- a/marketplace-ui/src/app/app.component.html +++ b/marketplace-ui/src/app/app.component.html @@ -1,25 +1,32 @@ -@if(!routingQueryParamService.isDesignerEnv()){ -
-
- -
-
-} -
-
- -
-
-@if(!routingQueryParamService.isDesignerEnv()){ - -} +
+ @if (!routingQueryParamService.isDesignerEnv()) { +
+
+ +
+
+ } +
+
+ +
+
+ @if (!routingQueryParamService.isDesignerEnv()) { +
+
+ +
+
+ } -@if (loadingService.isLoading()) { - -} \ No newline at end of file diff --git a/marketplace-ui/src/app/app.component.scss b/marketplace-ui/src/app/app.component.scss index bc547d095..18f872a30 100644 --- 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 index 2a9174723..5fe2d7622 100644 --- a/marketplace-ui/src/app/app.component.spec.ts +++ b/marketplace-ui/src/app/app.component.spec.ts @@ -7,6 +7,7 @@ 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; @@ -14,6 +15,7 @@ describe('AppComponent', () => { let routingQueryParamService: jasmine.SpyObj; let activatedRoute: ActivatedRoute; let navigationStartSubject: Subject; + let appElement: HTMLElement; beforeEach(async () => { navigationStartSubject = new Subject(); @@ -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 index 25ab92bc5..30c5dae07 100644 --- 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 index 702afd609..389ce3784 100644 --- 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 @@ -