From affe2666094217c557c62eda283aece68718a8c6 Mon Sep 17 00:00:00 2001
From: June Kelly <june@junek.xyz>
Date: Wed, 8 Dec 2021 09:07:11 +0000
Subject: [PATCH] Merge pull request #5995 from overleaf/jk-navbar-menu-button

[web] Use real button for Menu button in navbar

GitOrigin-RevId: c1b85c366046774aa638801647cb61eba0de7098
---
 .../components/menu-button.js                     | 15 ++++++++++-----
 .../frontend/stylesheets/app/editor/toolbar.less  |  3 ++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js
index 537f851f80..178e780a46 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js
@@ -6,11 +6,16 @@ function MenuButton({ onClick }) {
   const { t } = useTranslation()
 
   return (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a role="button" className="btn btn-full-height" href="#" onClick={onClick}>
-      <Icon type="fw" modifier="bars" classes={{ icon: 'editor-menu-icon' }} />
-      <p className="toolbar-label">{t('menu')}</p>
-    </a>
+    <div className="toolbar-item">
+      <button className="btn btn-full-height" onClick={onClick}>
+        <Icon
+          type="bars "
+          modifier="fw"
+          classes={{ icon: 'editor-menu-icon' }}
+        />
+        <p className="toolbar-label">{t('menu')}</p>
+      </button>
+    </div>
   )
 }
 
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index 935efdece0..309ea22117 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -20,7 +20,8 @@
     }
   }
 
-  .toolbar-right {
+  .toolbar-right,
+  .toolbar-left {
     button {
       background: transparent;
       box-shadow: none;