Moved logout button to sidebar and fix default width sidebar. (#1942)

* Moved logout button to sidebar and fix default width sidebar.

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Fix logout url. Save collapse to localstorage.

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Clear code.

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Update logout button if collapse

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Fix dark mode for collapse button. Update toolbar. Remove localstorage.

* Fix collapse auto-import

* Remove collapse from settings

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

assets/components/SideMenu.vue

@@ -8,20 +8,29 @@
           </svg>
         </router-link>
       </div>
-      <div class="column is-narrow has-text-right px-1">
+    </div>
-        <button class="button is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
+    <div class="columns is-marginless">
+      <div class="column is-narrow py-0 pl-0 pr-1">
+        <button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
           <span class="icon">
             <mdi-light-magnify />
           </span>
         </button>
       </div>
-      <div class="column is-narrow has-text-right px-0">
+      <div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
-        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded">
+        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-small">
           <span class="icon">
             <mdi-light-cog />
           </span>
         </router-link>
       </div>
+      <div class="column is-narrow py-0 px-0" v-if="secured">
+        <a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
+          <span class="icon">
+            <mdi-light-logout />
+          </span>
+        </a>
+      </div>
     </div>
     <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" v-if="ready">
@@ -58,6 +67,7 @@
 <script lang="ts" setup>
 import type { Container } from "@/types/Container";
 
+const { base, secured } = config;
 const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);

assets/composables/settings.ts

@@ -70,6 +70,7 @@ const softWrap = computed({
 });
 
 export {
+  collapseNav,
   softWrap,
   hourStyle,
   lightTheme,

assets/layouts/default.vue

@@ -25,8 +25,8 @@
       </pane>
     </splitpanes>
     <button
-      @click="collapseNav = !collapseNav"
+      @click="collapse"
-      class="button is-rounded"
+      class="button is-small is-rounded"
       :class="{ collapsed: collapseNav }"
       id="hide-nav"
       v-if="!isMobile"
@@ -47,7 +47,6 @@ import { Splitpanes, Pane } from "splitpanes";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
 
-const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
 
@@ -74,6 +73,9 @@ function showFuzzySearch() {
     active: true,
   });
 }
+function collapse() {
+  collapseNav.value = !collapseNav.value;
+}
 function onResized(e: any) {
   if (e.length == 2) {
     menuWidth.value = e[0].size;
@@ -112,7 +114,8 @@ function onResized(e: any) {
     left: -40px;
     width: 60px;
     padding-left: 40px;
-    background: rgba(0, 0, 0, 0.95);
+    color: var(--text-strong-color);
+    background: var(--scheme-main);
 
     &:hover {
       left: -25px;

assets/pages/index.vue

@@ -1,13 +1,9 @@
 <template>
   <div>
-    <section class="hero is-small mt-4">
+    <section class="is-small mt-1" v-if="secured && isMobile">
-      <div class="hero-body">
+      <div class="container">
-        <div class="container">
+        <div class="ml-1">
-          <div class="columns">
+          <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
-            <div class="column is-narrow" v-if="secured">
-              <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
-            </div>
-          </div>
         </div>
       </div>
     </section>