[ACS-12390] Changes needed to fix search input visibility when resizing browser window (#12137)

* [ACS-12390] Changes needed to fix search input visibility when resizing browser window

* [ACS-12390] Addressed copilot comments

lib/core/shell/src/lib/components/shell/shell.component.html

@@ -2,7 +2,7 @@
   #layout
   [sidenavMin]="sidenavMin"
   [sidenavMax]="sidenavMax"
-  [stepOver]="600"
+  [stepOver]="smallScreenBreakpoint"
   [hideSidenav]="hideSidenav"
   [expandedSidenav]="expandedSidenav"
   (expanded)="onExpanded($event)"

lib/core/shell/src/lib/components/shell/shell.component.spec.ts

@@ -20,7 +20,7 @@ import { AppConfigService } from '@alfresco/adf-core';
 import { ShellLayoutComponent } from './shell.component';
 import { provideRouter, RouterModule } from '@angular/router';
 import { of } from 'rxjs';
-import { ShellAppService, SHELL_APP_SERVICE } from '../../services/shell-app.service';
+import { ShellAppService, SHELL_APP_SERVICE, SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT } from '../../services/shell-app.service';
 import { RouterTestingHarness } from '@angular/router/testing';
 
 describe('AppLayoutComponent', () => {
@@ -30,7 +30,15 @@ describe('AppLayoutComponent', () => {
     let shellAppService: ShellAppService;
     let routerHarness: RouterTestingHarness;
 
-    beforeEach(async () => {
+    const initializeShellComponent = (breakpoint?: number): void => {
+        if (breakpoint !== undefined) {
+            TestBed.overrideProvider(SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT, { useValue: breakpoint });
+        }
+        fixture = TestBed.createComponent(ShellLayoutComponent);
+        component = fixture.componentInstance;
+    };
+
+    beforeEach(() => {
         const shellService: ShellAppService = {
             pageHeading$: of('Title'),
             hideSidenavConditions: [],
@@ -51,9 +59,11 @@ describe('AppLayoutComponent', () => {
                 provideRouter([{ path: 'minimize', component: ShellLayoutComponent }])
             ]
         });
+    });
 
-        fixture = TestBed.createComponent(ShellLayoutComponent);
-        component = fixture.componentInstance;
+    describe('sidenav state', () => {
+        beforeEach(async () => {
+            initializeShellComponent();
             appConfig = TestBed.inject(AppConfigService);
             shellAppService = TestBed.inject(SHELL_APP_SERVICE);
             routerHarness = await RouterTestingHarness.create();
@@ -64,7 +74,6 @@ describe('AppLayoutComponent', () => {
             appConfig.config.locale = 'en';
         });
 
-    describe('sidenav state', () => {
         it('should get state from configuration', () => {
             appConfig.config.sideNav = {
                 expandedSidenav: false,
@@ -119,7 +128,6 @@ describe('AppLayoutComponent', () => {
 
             expect(component.expandedSidenav).toBe(false);
         });
-    });
 
         it('should close menu on mobile screen size', () => {
             component.minimizeSidenav = false;
@@ -190,4 +198,22 @@ describe('AppLayoutComponent', () => {
 
             expect(component.minimizeSidenav).toBeFalse();
         });
+    });
+
+    describe('SidenavLayout', () => {
+        it('should have assigned correct stepOver by default', () => {
+            initializeShellComponent();
+
+            fixture.detectChanges();
+            expect(component.layout.stepOver).toBe(600);
+        });
+
+        it('should have assigned correct stepOver based on configured value', () => {
+            const breakpoint = 800;
+            initializeShellComponent(breakpoint);
+
+            fixture.detectChanges();
+            expect(component.layout.stepOver).toBe(breakpoint);
+        });
+    });
 });

lib/core/shell/src/lib/components/shell/shell.component.ts

@@ -29,7 +29,13 @@ import { Observable } from 'rxjs';
 import { filter, map, withLatestFrom } from 'rxjs/operators';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Directionality } from '@angular/cdk/bidi';
-import { SHELL_APP_SERVICE, SHELL_NAVBAR_MAX_WIDTH, SHELL_NAVBAR_MIN_WIDTH, ShellAppService } from '../../services/shell-app.service';
+import {
+    SHELL_APP_SERVICE,
+    SHELL_NAVBAR_MAX_WIDTH,
+    SHELL_NAVBAR_MIN_WIDTH,
+    SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT,
+    ShellAppService
+} from '../../services/shell-app.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
@@ -56,6 +62,8 @@ export class ShellLayoutComponent implements OnInit {
     @ViewChild('layout', { static: true })
     layout: SidenavLayoutComponent;
 
+    readonly smallScreenBreakpoint = inject(SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT, { optional: true }) ?? 600;
+
     isSmallScreen$: Observable<boolean>;
 
     expandedSidenav: boolean;
@@ -76,7 +84,7 @@ export class ShellLayoutComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches));
+        this.isSmallScreen$ = this.breakpointObserver.observe([`(max-width: ${this.smallScreenBreakpoint}px)`]).pipe(map((result) => result.matches));
 
         this.hideSidenav = this.shellService.hideSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
         this.minimizeSidenav = this.shellService.minimizeSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el));

lib/core/shell/src/lib/services/shell-app.service.ts

@@ -36,3 +36,4 @@ export const SHELL_APP_SERVICE = new InjectionToken<ShellAppService>('SHELL_APP_
 export const SHELL_AUTH_TOKEN = new InjectionToken<CanActivateFn | CanActivateChildFn>('SHELL_AUTH_TOKEN');
 export const SHELL_NAVBAR_MIN_WIDTH = new InjectionToken<number>('SHELL_NAVBAR_MIN_WIDTH');
 export const SHELL_NAVBAR_MAX_WIDTH = new InjectionToken<number>('SHELL_NAVBAR_MAX_WIDTH');
+export const SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT = new InjectionToken<number>('SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT');