From 764d176455cb74ec0add824921826464f33ad3e1 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 2 May 2023 09:08:26 -0700
Subject: [PATCH] feat: moves mobile host to mobile menu. see #2157 (#2165)

* Revert "feat: adds host drop down to mobile view. see #2157 (#2160)"

This reverts commit 088d96cb0d8b65c9993a0e285428c6b806a3eeb3.

* feat: moves mobiles host drop down to mobile menu
---
 assets/components/MobileMenu.vue | 37 ++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue
index a2b4e2d4..8bc6c562 100644
--- a/assets/components/MobileMenu.vue
+++ b/assets/components/MobileMenu.vue
@@ -8,20 +8,8 @@
           </svg>
         </router-link>
       </div>
-      <div class="column ml-4" v-if="config.hosts.length > 1">
-        <div class="mb-3">
-          <o-dropdown v-model="sessionHost" aria-role="list">
-            <template #trigger>
-              <o-button variant="primary" type="button" size="small">
-                <span>{{ sessionHost }}</span>
-              </o-button>
-            </template>
-
-            <o-dropdown-item :value="value" aria-role="listitem" v-for="value in config.hosts" :key="value">
-              <span>{{ value }}</span>
-            </o-dropdown-item>
-          </o-dropdown>
-        </div>
+      <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container-id'">
+        {{ allContainersById[route.params.id as string]?.name }}
       </div>
 
       <div class="column is-narrow push-right">
@@ -37,6 +25,23 @@
     </div>
 
     <div class="menu-label level is-mobile is-hidden-mobile" :class="{ 'is-active': showNav }">
+      <div v-if="config.hosts.length > 1">
+        <o-dropdown v-model="sessionHost" aria-role="list">
+          <template #trigger>
+            <o-button variant="primary" type="button" size="small">
+              <span>{{ sessionHost }}</span>
+              <span class="icon">
+                <carbon:caret-down />
+              </span>
+            </o-button>
+          </template>
+
+          <o-dropdown-item :value="value" aria-role="listitem" v-for="value in config.hosts" :key="value">
+            <span>{{ value }}</span>
+          </o-dropdown-item>
+        </o-dropdown>
+      </div>
+
       <div class="level-item has-text-centered">
         <div>
           <button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
@@ -84,11 +89,11 @@
 </template>
 
 <script lang="ts" setup>
-import { sessionHost } from "@/composables/storage";
 const { base, secured } = config;
+import { sessionHost } from "@/composables/storage";
 const store = useContainerStore();
 const route = useRoute();
-const { visibleContainers } = storeToRefs(store);
+const { visibleContainers, allContainersById } = storeToRefs(store);
 
 let showNav = $ref(false);