refactor: Minor changes to menu and settings tab

src/components/TheSettingsMenu.vue

@@ -3,10 +3,10 @@
         <v-btn icon tile large @click="showSettings = true">
             <v-icon>mdi-cogs</v-icon>
         </v-btn>
-        <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile">
+        <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile" @keydown.esc="showSettings = false">
             <panel :title="$t('Settings.InterfaceSettings')" icon="mdi-cogs" card-class="settings-menu-dialog" :margin-bottom="false" style="overflow: hidden;" :height="isMobile ? 0 : 548">
                 <template v-slot:buttons>
-                    <v-btn icon @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <template v-if="isMobile">
                     <v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">

src/components/TheSidebar.vue

@@ -17,25 +17,32 @@
     .active-nav-item {
         border-right: 4px solid var(--v-primary-base);
     }
-    .nowrap {
-        white-space: nowrap !important;
+    .menu-item-icon {
+        opacity: .85;
+    }
+    .menu-item-title {
+        line-height: 30px;
+        font-size: 14px;
+        font-weight: 600;
+        text-transform: uppercase;
+        opacity: .85;
     }
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="200px" clipped app> 
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(menuStyle === 'iconsOnly')" :key="menuStyle" width="220px" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
                     <v-list-item 
                         router to="/allPrinters"
                         class="small-list-item mt-1"
                     >
-                        <v-list-item-icon class="my-3 mr-3">
+                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
                             <v-icon>mdi-view-dashboard-outline</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
-                            <v-list-item-title tile>{{ $t("App.Printers")}}</v-list-item-title>
+                            <v-list-item-title tile class="menu-item-title">{{ $t("App.Printers")}}</v-list-item-title>
                         </v-list-item-content>
 
                     </v-list-item>
@@ -47,19 +54,19 @@
                         v-if="showInNavi(category)"
                         class="small-list-item"
                     >
-                        <v-list-item-icon class="my-3 mr-3">
+                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
                             <v-icon>mdi-{{ category.icon }}</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
-                            <v-list-item-title tile>{{ $t(`Router.${category.title}`) }}</v-list-item-title>
+                            <v-list-item-title tile class="menu-item-title">{{ $t(`Router.${category.title}`) }}</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
                 </div>
             </v-list-item-group>
         </v-list>
         <template v-slot:append>
             <v-list-item class="small-list-item mb-2">
-                <v-list-item-icon>
+                <v-list-item-icon class="menu-item-icon">
                     <about-modal></about-modal>
                 </v-list-item-icon>
             </v-list-item>
@@ -82,6 +89,7 @@ import AboutModal from '@/components/modals/AboutModal.vue'
         AboutModal
     }
 })
+
 export default class TheSidebarAlt extends Mixins(BaseMixin) {
     get naviDrawer(): boolean {
         return this.$store.state.naviDrawer
@@ -91,8 +99,8 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         this.$store.dispatch('setNaviDrawer', newVal)
     }
 
-    get boolWideNavDrawer() {
-        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    get menuStyle() {
+        return this.$store.state.gui.dashboard.menuStyle
     }
 
     get sidebarBackground(): string {

src/components/settings/SettingsUiSettingsTab.vue

@@ -60,8 +60,8 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.BoolWideNavDrawer')" :sub-title="$t('Settings.UiSettingsTab.BoolWideNavDrawerDescription')" :dynamicSlotWidth="true">
-                    <v-switch v-model="boolWideNavDrawer" hide-details class="mt-0"></v-switch>
+                <settings-row :title="$t('Settings.UiSettingsTab.MenuStyle')" :sub-title="$t('Settings.UiSettingsTab.MenuStyleDescription')">
+                    <v-select v-model="menuStyleSetting" :items="menuStyles" outlined dense hide-details class="mt-0"></v-select>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')" :dynamicSlotWidth="true">
@@ -80,9 +80,11 @@ import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import {defaultLogoColor, defaultPrimaryColor} from '@/store/variables'
 import {Debounce} from 'vue-debounce-decorator'
+
 @Component({
     components: {SettingsRow}
 })
+
 export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     private defaultLogoColor = defaultLogoColor
     private defaultPrimaryColor = defaultPrimaryColor
@@ -151,12 +153,25 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'general.confirmOnPowerDeviceChange', value: newVal })
     }
 
-    get boolWideNavDrawer() {
-        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    get menuStyleSetting() {
+        return this.$store.state.gui.dashboard.menuStyle
+    }
+
+    set menuStyleSetting(newVal) {
+        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.menuStyle', value: newVal })
     }
 
-    set boolWideNavDrawer(newVal) {
-        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolWideNavDrawer', value: newVal })
+    get menuStyles() {
+        return [
+            {
+                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsOnly'),
+                value: 'iconsOnly'
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsAndText'),
+                value: 'iconsAndText'
+            }
+        ]
     }
 
     get boolHideUploadAndPrintButton() {

src/locales/en.json

@@ -670,8 +670,10 @@
 			"ShowWebcamInNavigation": "Show Webcam in navigation",
 			"BoolBigThumbnail": "Large thumbnail",
 			"BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
-			"BoolWideNavDrawer": "Wide Navigation Drawer",
-			"BoolWideNavDrawerDescription": "Display a wider Navigation Toolbar",
+			"MenuStyle": "Style of the side menu",
+			"MenuStyleDescription": "Change the appearance of the side menu",
+			"MenuStyleIconsOnly": "Icons only",
+			"MenuStyleIconsAndText": "Icons + Text",
 			"BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
 			"BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the topbar.",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",

src/store/gui/index.ts

@@ -32,6 +32,7 @@ export const getDefaultState = (): GuiState => {
             boolTempchart: true,
             boolBigThumbnail: true,
             boolWideNavDrawer: false,
+            menuStyle: 'iconsOnly',
             macroManagement: 'simple',
             hiddenMacros: [],
             hiddenTempChart: [],