Merge pull request #2485 from boltdesignsystem/feature/DS-612-Update-…

…The-Navbar-Mobile-Icon DS-612 Update the navbar mobile icon
boltdesignsystem · May 12, 2022 · af5f4a1 · af5f4a1
2 parents 2f48cf4 + e7914cb
commit af5f4a1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/packages/components/bolt-navbar/src/navbar-menu.scss b/packages/components/bolt-navbar/src/navbar-menu.scss
@@ -16,7 +16,8 @@
 
 .c-bolt-navbar-menu__button {
   @include bolt-button-reset;
-  display: block;
+  display: flex;
+  align-items: center;
   position: relative;
   width: 100%;
   padding: calc(var(--bolt-spacing-y-xsmall) / 2) var(--bolt-spacing-x-xsmall);
@@ -31,6 +32,8 @@
   white-space: nowrap;
 
   @include bolt-mq($until: xsmall) {
+    justify-content: center;
+    width: 44px;
     height: 100%; // fix for height: 100% causing issues on larger screen sizes
     border-left-color: var(--m-bolt-border);
     border-radius: 0;
@@ -82,6 +85,7 @@
 .c-bolt-navbar-menu__button-text {
   position: relative;
   // z-index: 10; // @todo
+  margin-right: var(--bolt-spacing-x-small);
   font-family: var(--bolt-type-font-family-body);
   font-size: var(--bolt-type-font-size-small);
   font-weight: var(--bolt-type-font-weight-semibold);
@@ -96,20 +100,41 @@
   display: inline-block;
   position: relative;
   // z-index: 10; // @todo
+  transform: scale(1) rotate(90deg);
   font-size: 1em;
   line-height: 0;
-  transition: transform 0.2s;
+  will-change: transform;
+  transition: transform ease-out 250ms;
 
   @media (prefers-reduced-motion) {
     transition: none !important;
   }
 
   @include bolt-mq($until: xsmall) {
+    display: flex;
+    justify-content: center;
+    transform: scale(0.7) rotate(90deg);
     font-size: 24px;
   }
 
   @at-root .c-bolt-navbar-menu--is-open & {
-    transform: rotate(180deg);
+    transform: scale(0) rotate(90deg);
+  }
+
+  > * {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    z-index: 0;
+  }
+}
+
+.c-bolt-navbar-menu__button-icon--close {
+  transform: scale(0) rotate(360deg);
+
+  @at-root .c-bolt-navbar-menu--is-open & {
+    transform: scale(0.7);
   }
 }
 

diff --git a/packages/components/bolt-navbar/src/overflow-menu.js b/packages/components/bolt-navbar/src/overflow-menu.js
@@ -1,5 +1,6 @@
 import { html, render, unsafeCSS, unsafeHTML } from '@bolt/element';
-import { iconChevronDown } from '@bolt/elements-icon/src/icons/js/chevron-down';
+import { iconMore } from '@bolt/elements-icon/src/icons/js/more';
+import { iconClose } from '@bolt/elements-icon/src/icons/js/close';
 import '@bolt/core-v3.x/utils/optimized-resize';
 
 // @todo this JS could be shared between Navbar and Tabs, nothing Navbar-specific here
@@ -192,7 +193,12 @@ export class BoltOverflowMenu {
         >
           <span class="${baseClass}__button-text">${moreText}</span>
           <span class="${baseClass}__button-icon">
-            ${unsafeHTML(iconChevronDown())}
+            ${unsafeHTML(iconMore())}
+          </span>
+          <span
+            class="${baseClass}__button-icon ${baseClass}__button-icon--close"
+          >
+            ${unsafeHTML(iconClose())}
           </span>
         </button>
         <div class="${baseClass}__dropdown" role="menu">