feat: add an option to have the sidebar closed or open by default

src/App.vue

@@ -1,37 +1,11 @@
-<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">
-            <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 +18,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>
 
@@ -105,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
     }
 
@@ -311,3 +299,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>

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>
 

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>
@@ -245,13 +245,31 @@ 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.showEmergencyStopDialog = true
-        } else {
-            this.emergencyStop()
-        }
+        if (!confirmOnEmergencyStop) this.emergencyStop()
+
+        this.showEmergencyStopDialog = true
     }
 
     emergencyStop() {
@@ -342,14 +360,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;
 }

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