DP-19337 Open/close behaviors in the hamburger menu

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

@@ -360,19 +360,23 @@ body.show-menu {
     position: relative;
     display: inline-block;
     padding-left: 25px;
-  }
 
-  &__desktop-label {
+    &::before {
 
-    @media ($bp-small-max) {
-      display: none;
-    }
-  }
+      @media ($bp-small-max) {
 
-  &__mobile-label {
+        content: "Mass.gov";
+      }
+
+      @media ($bp-small-min) {
+
+        content: "Menu";
+      }
 
-    @media ($bp-small-min) {
-      display: none;
+    }
+
+    .show-menu &:before {
+      content: "Close";
     }
   }
 
@@ -397,7 +401,6 @@ body.show-menu {
     }
   }
 
-
   &__nav-search {
     padding: 15px 20px 15px;
 
@@ -534,111 +537,122 @@ body.show-menu {
               border-bottom-color: $c-primary-alt;
             }
           }
-        }
-      }
 
-      // Override styles for desktop version utility nav content.
+          .show-menu &__content {
 
-      .show-menu & .ma__utility-nav__content {
+            // Override styles for desktop version utility nav content.
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            position: relative;
+            top: auto;
+            right: auto;
+            color: $c-black;
+            z-index: 90;
 
-        @media ($bp-header-toggle-max) {
+            transition: max-height 0.6s ease-in-out;
 
-          position: relative;
-          top: auto;
-          right: auto;
-          margin: 0;
-          padding: 0;
-          width: 100%;
-          color: $c-black;
+            &.is-closed {
 
-          height: 0;
-          opacity: 0;
+              @include ma-visually-hidden;
 
-          transition: opacity 0.2s;
-          transition: height 0.6s;
+              overflow-y: hidden;
+              padding: 0;
+              margin: 0;
 
-          .is-closed & {
-            transition: opacity 0.2s;
-          }
+              display: none !important;
+              transition: max-height 0.8s ease-in-out;
+            }
 
-          & .ma__utility-nav__content-title {
-            display: none;
-          }
+            & .ma__utility-nav__content-title {
+              display: none;
+            }
 
-          & .ma__utility-nav__container {
-            padding: 0;
-            background-color: $c-gray-lightest;
-            overflow-y: visible;
+            & .ma__utility-nav__container {
+              padding: 0;
+              background-color: $c-gray-lightest;
+              overflow-y: visible;
+              max-height: auto;
+
+              transition: opacity 0.4s;
 
-            .translated-rtl &,
-            .translated-ltr & {
-              height: auto;
+              .translated-rtl &,
+              .translated-ltr & {
+                height: auto;
+              }
             }
-          }
 
-          & .ma__utility-nav__container__close {// close window button in the dropdown.
-            display: none;
-          }
+            &.is-closed .ma__utility-nav__container {
+              transition: opacity 0.2s;
+            }
 
-          & .ma__utility-panel {
-            background-color: $c-gray-lightest;
-            color: $c-black;
+            // Override styles for desktop version utility nav content.
 
-            @include ma-reset-list;
-          }
+            & .ma__utility-nav__container__close {// close window button in the dropdown.
 
-          & .ma__utility-panel + .ma__utility-panel {
-            margin-top: 1em;
-          }
-
-          & .ma__utility-panel__description {
-            width: 100%;
-            text-align: left;
-            display: block;
-            position: relative;
-            font-style: italic;
-            font-size: 1.125rem;
-            line-height: 1.33;
-            padding: 10px 20px 10px 30px;
-            color: $c-black;
-            margin-bottom: 0;
-          }
+              display: none;
+            }
 
-          & .ma__utility-panel__items {
-            margin-bottom: 0;
-          }
+            & .ma__utility-panel {
+              background-color: $c-gray-lightest;
+              color: $c-black;
 
-          & .ma__utility-panel__item {
-            background-color: $c-gray-lightest;
-            color: $c-black;
-            margin: 0;
-            display: block;
-          }
+              @include ma-reset-list;
+            }
 
-          & .ma__utility-panel__item .ma__decorative-link {
-            padding: 0;
-          }
+            & .ma__utility-panel + .ma__utility-panel {
+              margin-top: 1em;
+            }
 
-          & .ma__utility-panel__item .ma__decorative-link a {
+            & .ma__utility-panel__description {
+              width: 100%;
+              text-align: left;
+              display: block;
+              position: relative;
+              font-style: italic;
+              font-size: 1.125rem;
+              line-height: 1.33;
+              padding: 10px 20px 10px 30px;
+              color: $c-black;
+              margin-bottom: 0;
+            }
 
-            @include ma-button-reset;
+            & .ma__utility-panel__items {
+              margin-bottom: 0;
+            }
 
-            width: 100%;
-            text-align: left;
-            display: block;
-            position: relative;
-            font-size: 1.25rem;
-            font-weight: 400;
-            line-height: 1.33;
-            padding: 10px 20px 10px 30px;
-            color: $c-black;
+            & .ma__utility-panel__item {
+              background-color: $c-gray-lightest;
+              color: $c-black;
+              margin: 0;
+              display: block;
+            }
 
-            &:hover {
-              text-decoration: underline;
+            & .ma__utility-panel__item .ma__decorative-link {
+              padding: 0;
             }
 
-            & svg {
-              display: none;
+            & .ma__utility-panel__item .ma__decorative-link a {
+
+              @include ma-button-reset;
+
+              width: 100%;
+              text-align: left;
+              display: block;
+              position: relative;
+              font-size: 1.25rem;
+              font-weight: 400;
+              line-height: 1.33;
+              padding: 10px 20px 10px 30px;
+              color: $c-black;
+
+              &:hover {
+                text-decoration: underline;
+              }
+
+              & svg {
+                display: none;
+              }
             }
           }
         }

assets/scss/03-organisms/_utility-nav.scss

@@ -107,7 +107,7 @@ $utility-nav-height: 43px;
       text-align: left;
     }
 
-    @media ($bp-header-toggle-max) {
+    @media ($bp-header-toggle-max) {// I MIGHT REMOVED IT TO REMOVE THE CHEVRON.
 
       @include ma-chevron;
 

changelogs/DP-19337.yml

@@ -0,0 +1,16 @@
+Changed:
+  - project: Patternlab
+    component: Header
+    description: Set only one menu is open at a time including the "log in to" content. (#1131)
+    issue: DP-19337
+    impact: Patch
+  - project: Patternlab
+    component: Header
+    description: Make the open/close animation consistent. (#1131)
+    issue: DP-19337
+    impact: Patch
+  - project: Patternlab
+    component: Header
+    description: Adjust the position of the bottom border of "Log In To…" content in the hamburger menu. (#1131)
+    issue: DP-19337
+    impact: Patch

patternlab/styleguide/source/_patterns/03-organisms/by-template/header-hamburger.twig

@@ -17,10 +17,8 @@
                 aria-label="Open the main menu for mass.gov"
                 class="ma__header__hamburger__menu-button js-header-menu-button">
           <span class="ma__header__hamburger__menu-icon"></span>
-          {# Menu label with screen size greater than 620px. #}
-          <span class="ma__header__hamburger__menu-text ma__header__hamburger__desktop-label js-header__menu-text">Menu</span>
-          {# Menu label with screen size less than 620px. #}
-          <span class="ma__header__hamburger__menu-text ma__header__hamburger__mobile-label js-header__menu-text">Mass.gov</span>
+          {# Visible menu label is managed with CSS.  The button has aria-label and the button label via aria-label is visible to screen reader users. #}
+          <span class="ma__header__hamburger__menu-text js-header__menu-text"></span>
         </button>
         {# Skip button to search. #}
         <button type="button"