From 088d96cb0d8b65c9993a0e285428c6b806a3eeb3 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 27 Apr 2023 16:32:48 -0700
Subject: [PATCH] feat: adds host drop down to mobile view. see #2157 (#2160)

* feat: adds host drop down to mobile view. see #2157

* fix: removes unused imports
---
 assets/components/MobileMenu.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue
index 37950c00..a2b4e2d4 100644
--- a/assets/components/MobileMenu.vue
+++ b/assets/components/MobileMenu.vue
@@ -8,8 +8,20 @@
           </svg>
         </router-link>
       </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 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>
 
       <div class="column is-narrow push-right">
@@ -72,10 +84,11 @@
 </template>
 
 <script lang="ts" setup>
+import { sessionHost } from "@/composables/storage";
 const { base, secured } = config;
 const store = useContainerStore();
 const route = useRoute();
-const { visibleContainers, allContainersById } = storeToRefs(store);
+const { visibleContainers } = storeToRefs(store);
 
 let showNav = $ref(false);