From dd73fef61b907043e3e6b681b966faedfa799dd3 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 12 Jul 2023 22:55:53 +0200
Subject: [PATCH 1/9] refactor: add TranslateResult to SettingsRow title and
 subtitle

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/settings/SettingsRow.vue       |  5 +-
 .../settings/SettingsUiSettingsTab.vue        | 70 +++++++++----------
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/components/settings/SettingsRow.vue b/src/components/settings/SettingsRow.vue
index 179b21e7b..7be3cd5a1 100644
--- a/src/components/settings/SettingsRow.vue
+++ b/src/components/settings/SettingsRow.vue
@@ -23,6 +23,7 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
+import { TranslateResult } from 'vue-i18n'
 
 @Component
 export default class SettingsRow extends Mixins(BaseMixin) {
@@ -33,10 +34,10 @@ export default class SettingsRow extends Mixins(BaseMixin) {
     declare readonly icon: string
 
     @Prop({ required: true })
-    declare readonly title: string
+    declare readonly title: string | TranslateResult
 
     @Prop({ required: false })
-    declare readonly subTitle: string
+    declare readonly subTitle: string | TranslateResult
 
     @Prop({ required: false, default: false })
     declare readonly dynamicSlotWidth: boolean
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 418775b66..a1d8bbead 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -2,7 +2,7 @@
     <div>
         <v-card flat>
             <v-card-text>
-                <settings-row :title="$t('Settings.UiSettingsTab.Logo').toString()">
+                <settings-row :title="$t('Settings.UiSettingsTab.Logo')">
                     <v-btn
                         v-if="logoColor.toLowerCase() !== defaultLogoColor.toLowerCase()"
                         small
@@ -23,7 +23,7 @@
                     </v-menu>
                 </settings-row>
                 <v-divider class="my-2" />
-                <settings-row :title="$t('Settings.UiSettingsTab.Primary').toString()">
+                <settings-row :title="$t('Settings.UiSettingsTab.Primary')">
                     <v-btn
                         v-if="primaryColor.toLowerCase() !== defaultPrimaryColor.toLowerCase()"
                         small
@@ -45,8 +45,8 @@
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.GcodeThumbnails').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.GcodeThumbnailsDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.GcodeThumbnails')"
+                    :sub-title="$t('Settings.UiSettingsTab.GcodeThumbnailsDescription')"
                     :dynamic-slot-width="true">
                     <v-btn
                         outlined
@@ -54,27 +54,27 @@
                         color="primary"
                         href="https://docs.mainsail.xyz/overview/features/thumbnails"
                         target="_blank">
-                        {{ $t('Settings.UiSettingsTab.Guide').toString() }}
+                        {{ $t('Settings.UiSettingsTab.Guide') }}
                     </v-btn>
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.BoolBigThumbnail').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.BoolBigThumbnailDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.BoolBigThumbnail')"
+                    :sub-title="$t('Settings.UiSettingsTab.BoolBigThumbnailDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolBigThumbnail" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINTDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT')"
+                    :sub-title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINTDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="displayCancelPrint" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.LockSliders').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.LockSlidersDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.LockSliders')"
+                    :sub-title="$t('Settings.UiSettingsTab.LockSlidersDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="lockSliders" hide-details class="mt-0" />
                 </settings-row>
@@ -82,8 +82,8 @@
                 <v-expand-transition>
                     <settings-row
                         v-show="lockSliders"
-                        :title="$t('Settings.UiSettingsTab.LockSlidersDelay').toString()"
-                        :sub-title="$t('Settings.UiSettingsTab.LockSlidersDelayDescription').toString()"
+                        :title="$t('Settings.UiSettingsTab.LockSlidersDelay')"
+                        :sub-title="$t('Settings.UiSettingsTab.LockSlidersDelayDescription')"
                         :dynamic-slot-width="true">
                         <v-text-field
                             v-model="lockSlidersDelay"
@@ -104,22 +104,22 @@
                 </v-expand-transition>
                 <v-divider v-show="lockSliders" class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStop').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStopDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStop')"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStopDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="confirmOnEmergencyStop" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange')"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.NavigationStyle').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription').toString()">
+                    :title="$t('Settings.UiSettingsTab.NavigationStyle')"
+                    :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription')">
                     <v-select
                         v-model="navigationStyleSetting"
                         :items="navigationStyles"
@@ -130,15 +130,15 @@
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')"
+                    :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolHideUploadAndPrintButton" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.PowerDeviceName').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.PowerDeviceNameDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.PowerDeviceName')"
+                    :sub-title="$t('Settings.UiSettingsTab.PowerDeviceNameDescription')"
                     :dynamic-slot-width="true">
                     <v-select
                         v-model="powerDeviceName"
@@ -150,43 +150,43 @@
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.HideSaveConfigButtonForBedMesh').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.HideSaveConfigButtonForBedMeshDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.HideSaveConfigButtonForBedMesh')"
+                    :sub-title="$t('Settings.UiSettingsTab.HideSaveConfigButtonForBedMeshDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="hideSaveConfigForBedMash" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.DisableFanAnimation').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.DisableFanAnimationDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.DisableFanAnimation')"
+                    :sub-title="$t('Settings.UiSettingsTab.DisableFanAnimationDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="disableFanAnimation" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.ManualProbeDialog').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.ManualProbeDialogDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.ManualProbeDialog')"
+                    :sub-title="$t('Settings.UiSettingsTab.ManualProbeDialogDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolManualProbeDialog" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.BedScrewsDialog').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.BedScrewsDialogDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.BedScrewsDialog')"
+                    :sub-title="$t('Settings.UiSettingsTab.BedScrewsDialogDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolBedScrewsDialog" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.ScrewsTiltAdjustDialog').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.ScrewsTiltAdjustDialogDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.ScrewsTiltAdjustDialog')"
+                    :sub-title="$t('Settings.UiSettingsTab.ScrewsTiltAdjustDialogDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolScrewsTiltAdjustDialog" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.TempchartHeight').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.TempchartHeightDescription').toString()">
+                    :title="$t('Settings.UiSettingsTab.TempchartHeight')"
+                    :sub-title="$t('Settings.UiSettingsTab.TempchartHeightDescription')">
                     <v-slider
                         v-model.lazy="tempchartHeight"
                         hide-details

From c44ec60b58c185761273030754d2de77824f4a52 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 12 Jul 2023 22:59:03 +0200
Subject: [PATCH 2/9] refactor: simplify SettingsUiSettingsTab.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/settings/SettingsUiSettingsTab.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index a1d8bbead..48c3f7e63 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -19,7 +19,7 @@
                             :value="logoColor"
                             hide-mode-switch
                             mode="rgba"
-                            @update:color="updateLogoColor"></v-color-picker>
+                            @update:color="updateLogoColor" />
                     </v-menu>
                 </settings-row>
                 <v-divider class="my-2" />
@@ -69,7 +69,7 @@
                     :title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT')"
                     :sub-title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINTDescription')"
                     :dynamic-slot-width="true">
-                    <v-switch v-model="displayCancelPrint" hide-details class="mt-0"></v-switch>
+                    <v-switch v-model="displayCancelPrint" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
@@ -135,7 +135,7 @@
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolHideUploadAndPrintButton" hide-details class="mt-0" />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.PowerDeviceName')"
                     :sub-title="$t('Settings.UiSettingsTab.PowerDeviceNameDescription')"
@@ -217,8 +217,8 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     mdiRestart = mdiRestart
     mdiTimerOutline = mdiTimerOutline
 
-    private defaultLogoColor = defaultLogoColor
-    private defaultPrimaryColor = defaultPrimaryColor
+    defaultLogoColor = defaultLogoColor
+    defaultPrimaryColor = defaultPrimaryColor
 
     get logoColor() {
         return this.$store.state.gui.uiSettings.logo

From b84bb85a55b8ad1258a6e45d6438122dc2ef4547 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 19:15:02 +0200
Subject: [PATCH 3/9] refactor: simplify App.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 24aacef7b..8a1193e72 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,12 +26,11 @@
 <template>
     <v-app dark :style="cssVars">
         <template v-if="socketIsConnected && guiIsReady">
-            <the-sidebar></the-sidebar>
-            <the-topbar></the-topbar>
-
+            <the-sidebar />
+            <the-topbar />
             <v-main id="content" :style="mainStyle">
                 <v-container id="page-container" fluid class="container px-3 px-sm-6 py-sm-6 mx-auto">
-                    <router-view></router-view>
+                    <router-view />
                 </v-container>
             </v-main>
             <the-service-worker />
@@ -44,8 +43,8 @@
             <the-bed-screws-dialog />
             <the-screws-tilt-adjust-dialog />
         </template>
-        <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'"></the-select-printer-dialog>
-        <the-connecting-dialog v-else></the-connecting-dialog>
+        <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'" />
+        <the-connecting-dialog v-else />
     </v-app>
 </template>
 

From 4c373588a1c4a60beedd09ac16f68be42c1f9827 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 19:15:42 +0200
Subject: [PATCH 4/9] style: move style at the bottom from the App.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue | 50 +++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8a1193e72..23ab639a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,3 @@
-<style>
-@import './assets/styles/fonts.css';
-@import './assets/styles/toastr.css';
-@import './assets/styles/page.scss';
-@import './assets/styles/sidebar.scss';
-@import './assets/styles/utils.scss';
-@import './assets/styles/updateManager.scss';
-
-:root {
-    --app-height: 100%;
-}
-
-#content {
-    background-attachment: fixed;
-    background-size: cover;
-    background-repeat: no-repeat;
-}
-
-/*noinspection CssUnusedSymbol*/
-.v-btn:not(.v-btn--outlined).primary {
-    /*noinspection CssUnresolvedCustomProperty*/
-    color: var(--v-btn-text-primary);
-}
-</style>
-
 <template>
     <v-app dark :style="cssVars">
         <template v-if="socketIsConnected && guiIsReady">
@@ -310,3 +285,28 @@ export default class App extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style>
+@import './assets/styles/fonts.css';
+@import './assets/styles/toastr.css';
+@import './assets/styles/page.scss';
+@import './assets/styles/sidebar.scss';
+@import './assets/styles/utils.scss';
+@import './assets/styles/updateManager.scss';
+
+:root {
+    --app-height: 100%;
+}
+
+#content {
+    background-attachment: fixed;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+/*noinspection CssUnusedSymbol*/
+.v-btn:not(.v-btn--outlined).primary {
+    /*noinspection CssUnresolvedCustomProperty*/
+    color: var(--v-btn-text-primary);
+}
+</style>

From 7ff331dac1ec1eff383af6e22e67ced0bb0fd492 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 19:19:55 +0200
Subject: [PATCH 5/9] refactor: simplify TheTopbar.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheTopbar.vue | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 41834d69a..eabd60c0c 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-app-bar app elevate-on-scroll :height="topbarHeight" class="topbar pa-0" clipped-left>
-            <v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
+            <v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer" />
             <router-link to="/">
                 <template v-if="sidebarLogo">
                     <img
@@ -17,12 +17,12 @@
                         class="nav-logo ml-4 mr-1 d-none d-sm-flex"
                         router
                         to="/"
-                        :ripple="false"></mainsail-logo>
+                        :ripple="false" />
                 </template>
             </router-link>
             <v-toolbar-title class="text-no-wrap ml-0 pl-2 mr-2">{{ printerName }}</v-toolbar-title>
-            <printer-selector v-if="countPrinters"></printer-selector>
-            <v-spacer></v-spacer>
+            <printer-selector v-if="countPrinters" />
+            <v-spacer />
             <input
                 ref="fileUploadAndStart"
                 type="file"
@@ -66,9 +66,9 @@
                 <v-icon class="mr-md-2">{{ mdiAlertOctagonOutline }}</v-icon>
                 <span class="d-none d-md-inline">{{ $t('App.TopBar.EmergencyStop') }}</span>
             </v-btn>
-            <the-notification-menu></the-notification-menu>
-            <the-settings-menu></the-settings-menu>
-            <the-top-corner-menu></the-top-corner-menu>
+            <the-notification-menu />
+            <the-settings-menu />
+            <the-top-corner-menu />
         </v-app-bar>
         <v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom dark>
             <strong>{{ $t('App.TopBar.Uploading') }} {{ uploadSnackbar.filename }}</strong>
@@ -84,7 +84,7 @@
         </v-snackbar>
         <v-dialog v-model="showEmergencyStopDialog" width="400" :fullscreen="isMobile">
             <panel
-                :title="$t('EmergencyStopDialog.EmergencyStop').toString()"
+                :title="$t('EmergencyStopDialog.EmergencyStop')"
                 toolbar-color="error"
                 card-class="emergency-stop-dialog"
                 :icon="mdiAlertOctagonOutline"
@@ -96,7 +96,7 @@
                 </template>
                 <v-card-text>{{ $t('EmergencyStopDialog.AreYouSure') }}</v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn text @click="showEmergencyStopDialog = false">{{ $t('EmergencyStopDialog.No') }}</v-btn>
                     <v-btn color="primary" text @click="emergencyStop">{{ $t('EmergencyStopDialog.Yes') }}</v-btn>
                 </v-card-actions>
@@ -247,11 +247,9 @@ export default class TheTopbar extends Mixins(BaseMixin) {
 
     btnEmergencyStop() {
         const confirmOnEmergencyStop = this.$store.state.gui.uiSettings.confirmOnEmergencyStop
-        if (confirmOnEmergencyStop) {
-            this.showEmergencyStopDialog = true
-        } else {
-            this.emergencyStop()
-        }
+        if (!confirmOnEmergencyStop) this.emergencyStop()
+
+        this.showEmergencyStopDialog = true
     }
 
     emergencyStop() {
@@ -342,14 +340,13 @@ export default class TheTopbar extends Mixins(BaseMixin) {
 }
 </script>
 
-<style>
+<style scoped>
 /*noinspection CssUnusedSymbol*/
-.topbar .v-toolbar__content {
+::v-deep .topbar .v-toolbar__content {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }
-</style>
-<style scoped>
+
 .button-min-width-auto {
     min-width: auto !important;
 }

From d9d214869257ed034924dc0c64b466d6afce9f0b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 20:20:09 +0200
Subject: [PATCH 6/9] feat: add setting for the default sidebar state

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue                                   | 18 ++++++++-
 src/components/TheSidebar.vue                 | 10 +----
 src/components/TheTopbar.vue                  | 20 ++++++++++
 .../settings/SettingsUiSettingsTab.vue        | 37 +++++++++++++++++++
 src/locales/en.json                           |  5 +++
 src/store/gui/index.ts                        |  1 +
 src/store/gui/types.ts                        |  1 +
 src/store/mutations.ts                        |  1 +
 8 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 23ab639a6..29a4a2b71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -79,13 +79,27 @@ export default class App extends Mixins(BaseMixin) {
         return this.$store.getters['files/getMainBackground']
     }
 
+    get naviDrawer(): boolean {
+        return this.$store.state.naviDrawer
+    }
+
+    get navigationStyle() {
+        return this.$store.state.gui.uiSettings.navigationStyle
+    }
+
     get mainStyle() {
-        let style = ''
+        let style: any = {
+            paddingLeft: '0',
+        }
 
         if (this.mainBackground !== null) {
-            style = 'background-image: url(' + this.mainBackground + ');'
+            style.backgroundImage = 'url(' + this.mainBackground + ')'
         }
 
+        // overwrite padding left for the sidebar
+        if (this.naviDrawer && this.navigationStyle === 'iconsAndText') style.paddingLeft = '220px'
+        if (this.naviDrawer && this.navigationStyle === 'iconsOnly') style.paddingLeft = '56px'
+
         return style
     }
 
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 8050321b2..6be678c99 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <v-navigation-drawer
         :key="navigationStyle"
-        v-model="naviDrawer"
+        :value="naviDrawer"
         :src="sidebarBackground"
         :mini-variant="navigationStyle === 'iconsOnly'"
         :width="navigationWidth"
@@ -70,10 +70,6 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
         return this.$store.state.naviDrawer
     }
 
-    set naviDrawer(newVal: boolean) {
-        this.$store.dispatch('setNaviDrawer', newVal)
-    }
-
     get navigationStyle() {
         return this.$store.state.gui.uiSettings.navigationStyle
     }
@@ -133,10 +129,6 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
 
         return output
     }
-
-    mounted() {
-        this.naviDrawer = this.$vuetify.breakpoint.lgAndUp
-    }
 }
 </script>
 
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index eabd60c0c..4c9f6256f 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -245,6 +245,26 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         )
     }
 
+    get defaultNavigationStateSetting() {
+        return this.$store.state.gui?.uiSettings?.defaultNavigationStateSetting ?? 'alwaysOpen'
+    }
+
+    mounted() {
+        //this.naviDrawer = this.$vuetify.breakpoint.lgAndUp
+        switch (this.defaultNavigationStateSetting) {
+            case 'alwaysClosed':
+                this.naviDrawer = false
+                break
+
+            case 'lastState':
+                this.naviDrawer = (localStorage.getItem('naviDrawer') ?? 'true') === 'true'
+                break
+
+            default:
+                this.naviDrawer = this.$vuetify.breakpoint.lgAndUp
+        }
+    }
+
     btnEmergencyStop() {
         const confirmOnEmergencyStop = this.$store.state.gui.uiSettings.confirmOnEmergencyStop
         if (!confirmOnEmergencyStop) this.emergencyStop()
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 48c3f7e63..9df7b90e0 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -129,6 +129,18 @@
                         dense />
                 </settings-row>
                 <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.DefaultNavigationState')"
+                    :sub-title="$t('Settings.UiSettingsTab.DefaultNavigationStateDescription')">
+                    <v-select
+                        v-model="defaultNavigationStateSetting"
+                        :items="defaultNavigationStateSettings"
+                        class="mt-0"
+                        hide-details
+                        outlined
+                        dense />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')"
                     :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')"
@@ -311,6 +323,31 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         ]
     }
 
+    get defaultNavigationStateSetting() {
+        return this.$store.state.gui.uiSettings.defaultNavigationStateSetting
+    }
+
+    set defaultNavigationStateSetting(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.defaultNavigationStateSetting', value: newVal })
+    }
+
+    get defaultNavigationStateSettings() {
+        return [
+            {
+                text: this.$t('Settings.UiSettingsTab.DefaultNavigationStateAlwaysOpen'),
+                value: 'alwaysOpen',
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.DefaultNavigationStateAlwaysClosed'),
+                value: 'alwaysClosed',
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.DefaultNavigationStateLastState'),
+                value: 'lastState',
+            },
+        ]
+    }
+
     get boolHideUploadAndPrintButton() {
         return this.$store.state.gui.uiSettings.boolHideUploadAndPrintButton ?? false
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index f5ec4852b..53555a96e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1037,6 +1037,11 @@
             "ConfirmOnEmergencyStopDescription": "Show a confirmation dialog on Emergency Stop",
             "ConfirmOnPowerDeviceChange": "Require confirm on Device Power changes",
             "ConfirmOnPowerDeviceChangeDescription": "Show a confirmation dialog on Device Power changes",
+            "DefaultNavigationState": "Navigation default state",
+            "DefaultNavigationStateAlwaysClosed": "always closed",
+            "DefaultNavigationStateAlwaysOpen": "always open",
+            "DefaultNavigationStateDescription": "Which state should have the navigation after open it.",
+            "DefaultNavigationStateLastState": "last state",
             "DisableFanAnimation": "Disable fan animation",
             "DisableFanAnimationDescription": "This can reduce some load in your Browser.",
             "DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 74fa10046..25506cffe 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -158,6 +158,7 @@ export const getDefaultState = (): GuiState => {
             boolWideNavDrawer: false,
             boolHideUploadAndPrintButton: false,
             navigationStyle: 'iconsAndText',
+            defaultNavigationStateSetting: 'alwaysOpen',
             powerDeviceName: null,
             hideSaveConfigForBedMash: false,
             disableFanAnimation: false,
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index d818af047..168b3614f 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -108,6 +108,7 @@ export interface GuiState {
         boolWideNavDrawer: boolean
         boolHideUploadAndPrintButton: boolean
         navigationStyle: 'iconsAndText' | 'iconsOnly'
+        defaultNavigationStateSetting: 'alwaysOpen' | 'alwaysClosed' | 'lastState'
         powerDeviceName: string | null
         hideSaveConfigForBedMash: boolean
         disableFanAnimation: boolean
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 1186708d7..6ae477a9e 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -5,6 +5,7 @@ import { RootState } from './types'
 export const mutations: MutationTree<RootState> = {
     setNaviDrawer(state, payload) {
         Vue.set(state, 'naviDrawer', payload)
+        localStorage.setItem('naviDrawer', payload)
     },
 
     setInstancesDB(state, payload) {

From c5d2d6ea8533f134fb437ad0f1aef3fd1e138b1d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 20:35:55 +0200
Subject: [PATCH 7/9] locale(en): fix en locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 53555a96e..e12740104 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1040,7 +1040,7 @@
             "DefaultNavigationState": "Navigation default state",
             "DefaultNavigationStateAlwaysClosed": "always closed",
             "DefaultNavigationStateAlwaysOpen": "always open",
-            "DefaultNavigationStateDescription": "Which state should have the navigation after open it.",
+            "DefaultNavigationStateDescription": "Which state should have the navigation per default.",
             "DefaultNavigationStateLastState": "last state",
             "DisableFanAnimation": "Disable fan animation",
             "DisableFanAnimationDescription": "This can reduce some load in your Browser.",

From 244e4a388264150ce1e9c636fcc56cf2d2586bed Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 20:36:02 +0200
Subject: [PATCH 8/9] locale(de): add de locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/de.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/locales/de.json b/src/locales/de.json
index c1bd8396f..48d862fb8 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1037,6 +1037,10 @@
             "ConfirmOnEmergencyStopDescription": "Zeige vor einem Notstop einen Bestätigungsdialog.",
             "ConfirmOnPowerDeviceChange": "Bestätigung für Änderung der Stromversorgung von Geräten",
             "ConfirmOnPowerDeviceChangeDescription": "Zeige vor Änderung der Stromversorgung von Geräten einen Bestätigungsdialog.",
+            "DefaultNavigationState": "Standard Navigationszustand",
+            "DefaultNavigationStateAlwaysClosed": "immer geschlossen",
+            "DefaultNavigationStateAlwaysOpen": "immer geöffnet",
+            "DefaultNavigationStateDescription": "Welchen zustand soll die Navigation normalerweise haben?",
             "DisableFanAnimation": "Lüfteranimation deaktivieren",
             "DisableFanAnimationDescription": "Dies kann die Last im Browser senken.",
             "DisplayCANCEL_PRINT": "Zeige CANCEL_PRINT an",

From 4ae700b5b30ac3f34aa309dd3377c3b1011f7b87 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 20:41:52 +0200
Subject: [PATCH 9/9] locale(de): add missing de locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/de.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/locales/de.json b/src/locales/de.json
index 48d862fb8..8a91a9656 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1041,6 +1041,7 @@
             "DefaultNavigationStateAlwaysClosed": "immer geschlossen",
             "DefaultNavigationStateAlwaysOpen": "immer geöffnet",
             "DefaultNavigationStateDescription": "Welchen zustand soll die Navigation normalerweise haben?",
+            "DefaultNavigationStateLastState": "letzter Zustand",
             "DisableFanAnimation": "Lüfteranimation deaktivieren",
             "DisableFanAnimationDescription": "Dies kann die Last im Browser senken.",
             "DisplayCANCEL_PRINT": "Zeige CANCEL_PRINT an",