From 2b9873e76bae502c5310f7891a47aa8a8008136a Mon Sep 17 00:00:00 2001
From: Dmitry Mazurov <dimabzz@gmail.com>
Date: Wed, 9 Nov 2022 02:09:57 +0300
Subject: [PATCH] Update mobile menu (#1946)

---
 assets/components/MobileMenu.vue | 35 ++++++++++++++++++++++++++++++++
 assets/layouts/default.vue       |  2 +-
 assets/pages/index.vue           | 21 +++++++++++--------
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue
index b69c190d..50b8d1e0 100644
--- a/assets/components/MobileMenu.vue
+++ b/assets/components/MobileMenu.vue
@@ -24,6 +24,36 @@
       </div>
     </div>
 
+    <div class="menu-label level is-mobile is-hidden-mobile" :class="{ 'is-active': showNav }">
+      <div class="level-item has-text-centered">
+        <div>
+          <button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
+            <span class="icon">
+              <mdi-light-magnify />
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-small is-rounded">
+            <span class="icon">
+              <mdi-light-cog />
+            </span>
+          </router-link>
+        </div>
+      </div>
+      <div class="level-item has-text-centered" v-if="secured">
+        <div>
+          <a class="button is-small is-rounded" :href="`${base}/logout`" :title="$t('button.logout')">
+            <span class="icon">
+              <mdi-light-logout />
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
       <li v-for="item in visibleContainers" :key="item.id">
@@ -42,6 +72,7 @@
 </template>
 
 <script lang="ts" setup>
+const { base, secured } = config;
 const store = useContainerStore();
 const route = useRoute();
 const { visibleContainers, allContainersById } = storeToRefs(store);
@@ -63,6 +94,10 @@ aside {
   max-height: 100vh;
   overflow: auto;
 
+  .level.is-hidden-mobile.is-active {
+    display: flex !important;
+  }
+
   .menu-label {
     margin-top: 1em;
   }
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
index 0c3542c6..e33fef68 100644
--- a/assets/layouts/default.vue
+++ b/assets/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <main v-if="!authorizationNeeded">
-    <mobile-menu v-if="isMobile"></mobile-menu>
+    <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
     <splitpanes @resized="onResized($event)">
       <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
         <side-menu @search="showFuzzySearch"></side-menu>
diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index 82f4bdf9..b9f37dd7 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -1,13 +1,6 @@
 <template>
   <div>
-    <section class="is-small mt-1" v-if="secured && isMobile">
-      <div class="container">
-        <div class="ml-1">
-          <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
-        </div>
-      </div>
-    </section>
-    <section class="level section">
+    <section class="level section pb-0-is-mobile">
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ containers.length }}</p>
@@ -40,7 +33,7 @@
       </div>
     </section>
 
-    <section class="columns is-centered section is-marginless">
+    <section class="columns is-centered section is-marginless pt-0-is-mobile">
       <div class="column is-12-mobile is-6-tablet is-5-desktop is-4-fullhd">
         <div class="panel">
           <p class="panel-heading">{{ $t("label.containers") }}</p>
@@ -160,6 +153,16 @@ function onEnter() {
   }
 }
 
+@media screen and (max-width: 768px) {
+  .pb-0-is-mobile {
+    padding-bottom: 0 !important;
+  }
+
+  .pt-0-is-mobile {
+    padding-top: 0 !important;
+  }
+}
+
 .icon {
   padding: 10px 3px;
 }