From 6810e520d3855379deffb78c90e9350335d13dab Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.local.rpega.com>
Date: Thu, 5 May 2022 15:08:17 +0200
Subject: [PATCH 1/5] DS-612-Replace chevron-down icon  with more icon

---
 packages/components/bolt-navbar/src/overflow-menu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/bolt-navbar/src/overflow-menu.js b/packages/components/bolt-navbar/src/overflow-menu.js
index f9af243ed4..63d5223a6a 100644
--- a/packages/components/bolt-navbar/src/overflow-menu.js
+++ b/packages/components/bolt-navbar/src/overflow-menu.js
@@ -1,5 +1,5 @@
 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 '@bolt/core-v3.x/utils/optimized-resize';
 
 // @todo this JS could be shared between Navbar and Tabs, nothing Navbar-specific here
@@ -192,7 +192,7 @@ export class BoltOverflowMenu {
         >
           <span class="${baseClass}__button-text">${moreText}</span>
           <span class="${baseClass}__button-icon">
-            ${unsafeHTML(iconChevronDown())}
+            ${unsafeHTML(iconMore())}
           </span>
         </button>
         <div class="${baseClass}__dropdown" role="menu">

From 635112e0df17e6a1ed1255b015387d9caa023e04 Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.local.rpega.com>
Date: Thu, 5 May 2022 15:08:35 +0200
Subject: [PATCH 2/5] DS-612: Update styles

---
 packages/components/bolt-navbar/src/navbar-menu.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/bolt-navbar/src/navbar-menu.scss b/packages/components/bolt-navbar/src/navbar-menu.scss
index 4e023d69fd..5b9ca39b3c 100644
--- a/packages/components/bolt-navbar/src/navbar-menu.scss
+++ b/packages/components/bolt-navbar/src/navbar-menu.scss
@@ -96,9 +96,10 @@
   display: inline-block;
   position: relative;
   // z-index: 10; // @todo
+  transform: rotate(90deg);
   font-size: 1em;
   line-height: 0;
-  transition: transform 0.2s;
+  transition: opacity 0.2s;
 
   @media (prefers-reduced-motion) {
     transition: none !important;
@@ -109,7 +110,7 @@
   }
 
   @at-root .c-bolt-navbar-menu--is-open & {
-    transform: rotate(180deg);
+    opacity: 0.8;
   }
 }
 

From e701a02689b7991ed11ebbe05bb67a65bf53106e Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.local.rpega.com>
Date: Thu, 5 May 2022 15:17:44 +0200
Subject: [PATCH 3/5] DS-612: Prevent icon flickering

---
 packages/components/bolt-navbar/src/navbar-menu.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/bolt-navbar/src/navbar-menu.scss b/packages/components/bolt-navbar/src/navbar-menu.scss
index 5b9ca39b3c..54c476b3eb 100644
--- a/packages/components/bolt-navbar/src/navbar-menu.scss
+++ b/packages/components/bolt-navbar/src/navbar-menu.scss
@@ -99,6 +99,7 @@
   transform: rotate(90deg);
   font-size: 1em;
   line-height: 0;
+  will-change: opacity;
   transition: opacity 0.2s;
 
   @media (prefers-reduced-motion) {

From 4cb41e3fe5909f952f7973397a5113ac09418895 Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.local.rpega.com>
Date: Wed, 11 May 2022 12:32:43 +0200
Subject: [PATCH 4/5] DS-612: Add close icon

---
 packages/components/bolt-navbar/src/overflow-menu.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/bolt-navbar/src/overflow-menu.js b/packages/components/bolt-navbar/src/overflow-menu.js
index 63d5223a6a..16f7da6bdb 100644
--- 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 { 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
@@ -194,6 +195,11 @@ export class BoltOverflowMenu {
           <span class="${baseClass}__button-icon">
             ${unsafeHTML(iconMore())}
           </span>
+          <span
+            class="${baseClass}__button-icon ${baseClass}__button-icon--close"
+          >
+            ${unsafeHTML(iconClose())}
+          </span>
         </button>
         <div class="${baseClass}__dropdown" role="menu">
           <div class="${baseClass}__dropdown-inner">

From e7914cb277cf3309ac806f815c9ed4d1d70b8f25 Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.local.rpega.com>
Date: Wed, 11 May 2022 12:33:03 +0200
Subject: [PATCH 5/5] DS-612: Update css style

---
 .../bolt-navbar/src/navbar-menu.scss          | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/components/bolt-navbar/src/navbar-menu.scss b/packages/components/bolt-navbar/src/navbar-menu.scss
index 54c476b3eb..4039676070 100644
--- 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,22 +100,41 @@
   display: inline-block;
   position: relative;
   // z-index: 10; // @todo
-  transform: rotate(90deg);
+  transform: scale(1) rotate(90deg);
   font-size: 1em;
   line-height: 0;
-  will-change: opacity;
-  transition: opacity 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 & {
-    opacity: 0.8;
+    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);
   }
 }