From 2cca4c976510fd563c2b63f14e6c22ce2ff53a39 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 29 Aug 2021 14:18:56 +0200
Subject: [PATCH] Improve responsiveness of navbar

---
 src/components/BotList.vue       |  3 ++-
 src/components/layout/NavBar.vue | 13 ++++++++++++-
 src/views/Home.vue               |  4 +++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/BotList.vue b/src/components/BotList.vue
index 06505510..0ebbd716 100644
--- a/src/components/BotList.vue
+++ b/src/components/BotList.vue
@@ -11,13 +11,14 @@
         @click="selectBot(bot.botId)"
       >
         {{ bot.botName || bot.botId }}
+        {{ allIsBotOnline[bot.botId] ? 'Online' : 'Offline' }}
+
         <b-button class="btn-xs ml-1" size="sm" title="Delete trade" @click="clickRemoveBot(bot)">
           <EditIcon :size="16" title="Delete trade" />
         </b-button>
         <b-button class="btn-xs ml-1" size="sm" title="Delete bot" @click="clickRemoveBot(bot)">
           <DeleteIcon :size="16" title="Delete trade" />
         </b-button>
-        {{ allIsBotOnline[bot.botId] ? 'Online' : 'Offline' }}
       </b-list-group-item>
     </b-list-group>
     <LoginModal class="mt-2" login-text="Add new bot" />
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 7c3e9265..31e6bd59 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -37,7 +37,8 @@
             </b-nav-text>
           </li>
           <li v-if="hasBots" class="nav-item">
-            <b-nav-item-dropdown right>
+            <!-- Hide dropdown on xs, instead show below  -->
+            <b-nav-item-dropdown right class="d-none d-sm-block">
               <b-dropdown-item>V: {{ getUiVersion }}</b-dropdown-item>
               <template #button-content>
                 <b-avatar size="2em" button>FT</b-avatar>
@@ -49,6 +50,16 @@
                 >Sign Out</router-link
               >
             </b-nav-item-dropdown>
+            <div class="d-block d-sm-none">
+              <!-- Visible only on XS -->
+              <b-dropdown-item>V: {{ getUiVersion }}</b-dropdown-item>
+              <router-link class="dropdown-item" to="/settings">Settings</router-link>
+              <b-checkbox v-model="layoutLockedLocal" class="pl-5">Lock layout</b-checkbox>
+              <b-dropdown-item @click="resetDynamicLayout">Reset Layout</b-dropdown-item>
+              <router-link class="dropdown-item" to="/" @click.native="clickLogout()"
+                >Sign Out</router-link
+              >
+            </div>
           </li>
           <li v-else>
             <!-- should open Modal window! -->
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5f11e3d2..10742994 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="home">
-    <bot-list />
+    <div class="container">
+      <bot-list />
+    </div>
     <hr />
     <!-- <img alt="Freqtrade logo" src="../assets/freqtrade-logo.png" width="450px" class="my-5" /> -->
     <div alt="Freqtrade logo" class="logo-svg my-5 mx-auto" />