From 87ec17c2435d5f9bb6e1f2ad5988500daad54cad Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Tue, 10 Sep 2024 21:46:50 +0200
Subject: [PATCH] [web] Fix top navigation bar on small screens

---
 web-src/src/components/NavbarBottom.vue |  2 +-
 web-src/src/components/NavbarTop.vue    | 14 ++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index 97a50383..e5a75b9d 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -45,7 +45,7 @@
         class="dropdown is-up is-right"
         :class="{ 'is-active': uiStore.show_player_menu }"
       >
-        <div class="dropdown-menu" role="menu">
+        <div class="dropdown-menu">
           <div class="dropdown-content">
             <div class="dropdown-item">
               <control-main-volume />
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index 779b7ba1..d056c3a4 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -1,11 +1,6 @@
 <template>
-  <nav
-    class="navbar is-light is-fixed-top"
-    :style="zindex"
-    role="navigation"
-    aria-label="main navigation"
-  >
-    <div class="navbar-brand">
+  <nav class="navbar is-light is-fixed-top" :style="zindex">
+    <div class="navbar-brand is-flex-grow-1">
       <control-link
         v-if="settingsStore.show_menu_item_playlists"
         class="navbar-item"
@@ -55,10 +50,8 @@
       >
         <mdicon class="icon" name="magnify" size="16" />
       </control-link>
-    </div>
-    <div class="navbar-end">
       <a
-        class="navbar-item"
+        class="navbar-item ml-auto"
         @click="uiStore.show_burger_menu = !uiStore.show_burger_menu"
       >
         <mdicon
@@ -152,6 +145,7 @@
         </div>
       </div>
     </div>
+
     <div
       v-show="show_settings_menu"
       class="is-overlay"