DP-19331 Set the nav bar height consistent in any screen sizes (#1115)

* test edit

* fix the dropdown visibility to keybord and screen readers maintaiing the show/hide animation effect.

* fix the dropdown visibility to keybord and screen readers maintaiing the show/hide animation effect.

* comment out the condition causing the keyboard trap issue with the menu button

* correct aria-hidden placement for the dropdown

* add jumpToSearch functioin

* disable mainNavMixed.js to avoid override mainNavHamburger.js

* menu button label  edit

* add chevron to direct link in main nav top level

* correct aria-hidden for + icon container

* clean up menu button label variables

* adjust icons for link and button in hamburger menu

* separate hamburger utility nav style from utility-nav.scss

* match utility nav in hamburger menu to main nav style

* add open/close behavior to util nav in hamburger menu

* separate hamburger nav utlity nav style separate from utility-nav.scss

* reverting merge conflict fix 1

* reverting merge conflict fix 2

* fix search access icon in page view

* fix lint errors

* lint error fix

* fix the hidden utility content height

* correct target container for utility content

* adjust vertical positioning of the menu button text

* move back original styles belong to utility_nav.scss

* correct class in utility item

* set up open/close behaviors for wide/util nav bar 'log in to'

* set up open/close behaviors for narrow/hamburger menu 'log in to

* fix conflict between 'log in to' buttons

* uncomment test style

* set focus between menu button, hamburger menu container, jump to search button and search input

* test edit

* fix syntax error

* merge hamburger and mix template and scss to minimize duplicate.

* clean up duplicate

* merge mainNavMixed.js to mainNavHamburger.js

* fix width for log in to content

* fix lint errors

* lint error fix

* fix positioning of the hamburger menu container

* smooth open/close behavior of log in to content in wide version

* adjust open/close behavior of log in to content in wide version

* remove invalid attribute

* remove duplicate markup

* style log in to content in hamburger nav

* fix error

* fix errors

* fix error

* test edit

* fix some lint errors in the existing code

* remove test style

* resolve conflicts between utilNav.js and mainNavHamburger.js

* remove duplicate markup

* fix conflicts between 2 utlity content displays

* set container size for utility container in hamburger menu on load

* hide utility nav content when sub menu in main nav is open

* remove unnecessary aria-label from hamburger main nav

* hide hamburger menu at resizing window in mix
over 841

* Hide hamburger menu when window size is resized to over 840 while hamburger menu is open.

* adjustment for Drupal output

* test edit

* add changelog for DP-17154

* remove box-shadow from utility nav item in hamburger menu

* setting up to close sub mneu as opening the utility nav content

* set up focus on the search box in the hamburger menu by clicking the search icon on the utility nav bar

* clean up unnecessary tabindex and aria-label

* fix typo

* setting up closure with esc key

* adjust focsus issue as menu open/close

* fix tabindex at closing menu button

* set the utlity nav bar height consistent regardless screensize

* remove test style

* add changelog for DP-19331

* lint error fix

* Updating reference screenshots

* clean up comments

* fix lint error

* fix for backstop error

* Fix indentation.

assets/scss/03-organisms/_header-hamburger.scss

@@ -1,7 +1,7 @@
 $header-mobile-menu-width: 300px;
 $header-logo-width: 150px;
 $bp-header-logo-min: "min-width: 1000px";
-$utility-nav-height: 43px;
+$utility-nav-height: 44px;
 
 body.show-menu {
   overflow: hidden;
@@ -80,13 +80,12 @@ body.show-menu {
   }
 
   &-wrapper {
+    height: $utility-nav-height;
 
     @include ma-container;
 
     @media ($bp-medium-min) {
 
-      // @include ma-container;
-
       display: flex;
       justify-content: space-between;
     }
@@ -95,7 +94,6 @@ body.show-menu {
 
     @media ($bp-header-toggle-max) {
 
-      // @include ma-container;
       padding-right: 0;
       padding-left: 0;
       height: $header-mobile-controls-height;
@@ -112,8 +110,13 @@ body.show-menu {
     display: flex;
     justify-content: space-between;
 
-    @media ($bp-header-toggle-max) {
-      width: 100%;
+    // Expand close button to fll the blue bar.
+
+    .show-menu & {
+
+      @media ($bp-header-toggle-max) {
+        width: 100%;
+      }
     }
   }
 
@@ -279,11 +282,20 @@ body.show-menu {
     padding-left: 20px;
     transition: transform 0.5s ease;
 
+    // Expand close button to fll the blue bar.
+
+    .show-menu & {
+
+      @media ($bp-header-toggle-max) {
+        width: 100%;
+      }
+    }
+
     span:first-child {
       opacity: 0.7;
     }
 
-    @media ($bp-medium-max) {
+    @media ($bp-header-toggle-max) {
 
       padding-left: 30px;
     }
@@ -292,6 +304,11 @@ body.show-menu {
 
       padding-left: 0;
     }
+
+    @media ($bp-medium-max) {
+
+      padding-left: 20px;
+    }
   }
 
   &__menu-icon {

changelogs/DP-19331.yml

@@ -0,0 +1,6 @@
+Changed:
+  - project: Patternlab
+    component: HeaderHamburgerMenu
+    description: Set the height of the nav bar consistent regardless of screen sizes. (#1115)
+    issue: DP-19331
+    impact: Minor