Add hamburger menu on small screens (#16388)

Reenable hamburger menu on small screens
brave · Jun 1, 2023 · e6b5026 · e6b5026
1 parent d4c764b
commit e6b5026
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/browser/resources/settings/brave_overrides/settings_ui.ts b/browser/resources/settings/brave_overrides/settings_ui.ts
@@ -37,9 +37,19 @@ RegisterStyleOverride(
         --brave-settings-menu-width: var(--settings-menu-width);
         --brave-settings-menu-margin: 12px;
       }
-      cr-drawer {
-        display: none !important;
+
+      /** Styling tweaks for the settings-menu when we display it inside the
+        * drawer. */
+      cr-drawer settings-menu {
+        --brave-settings-menu-margin-v: 0;
+        --brave-settings-menu-padding: 24px;
+        --brave-settings-menu-margin: 0;
       }
+
+      cr-drawer settings-menu::part(header) {
+        display: none;
+      }
+
       #container {
         /* menu and content next to each other in the horizontal center */
         justify-content: center;

diff --git a/ui/webui/resources/br_elements/br_toolbar/br_toolbar.html b/ui/webui/resources/br_elements/br_toolbar/br_toolbar.html
@@ -1,5 +1,19 @@
 <link rel="stylesheet" href="chrome://resources/brave/fonts/poppins.css">
 <style include="br-shared-style">
+  #menuButtonContainer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #menuButton {
+    --cr-icon-button-fill-color: currentColor;
+  }
+
   .br-toolbar {
     --toolbar-background: var(--brave-toolbar-gradient);
     background: var(--toolbar-background);
@@ -101,6 +115,15 @@
 
 </style>
 <div class$="br-toolbar [[fontsLoadedClassName]]">
+  <template is="dom-if" if="[[showMenu]]">
+    <div id="menuButtonContainer">
+      <cr-icon-button id="menuButton"
+          iron-icon="cr20:menu" on-click="onMenuTap_"
+          aria-label$="[[menuLabel]]"
+          title="[[menuLabel]]">
+      </cr-icon-button>
+    </div>
+  </template>
   <ul class="nav-items" role="navigation" aria-label="Category navigation">
     <li class="nav-items-list-item" title="[[settingsTitle]]">
       <a class$="nav-item [[getNavItemSelectedClassName('settings')]]" href="chrome://settings">

diff --git a/ui/webui/resources/br_elements/br_toolbar/br_toolbar.ts b/ui/webui/resources/br_elements/br_toolbar/br_toolbar.ts
@@ -108,17 +108,26 @@ Polymer({
 
   /** @private */
   onMenuTap_: function() {
-    console.debug('[br_toolbar] Not Implemented: onMenuTap_')
+    this.dispatchEvent(new CustomEvent(
+      'cr-toolbar-menu-tap', {bubbles: true, composed: true}))
   },
 
   focusMenuButton() {
-    console.debug('[br_toolbar] Not Implemented: focusMenuButton')
+    requestAnimationFrame(() => {
+      // Wait for next animation frame in case dom-if has not applied yet and
+      // added the menu button.
+      const menuButton =
+          this.shadowRoot!.querySelector<HTMLElement>('#menuButton');
+      if (menuButton) {
+        menuButton.focus();
+      }
+    });
   },
 
   /** @return {boolean} */
   isMenuFocused() {
-    console.debug('[br_toolbar] Not Implemented: isMenuFocused (no menuButton)')
-    return false;
+    return !!this.shadowRoot!.activeElement &&
+        this.shadowRoot!.activeElement.id === 'menuButton';
   },
 
   /** @private */