feat: add user-configurable custom navigation links in sidebar

components.d.ts

@@ -42,7 +42,9 @@ declare module 'vue' {
     AppNamedSwitch: typeof import('./src/components/ui/AppNamedSwitch.vue')['default']
     AppNamedTextField: typeof import('./src/components/ui/AppNamedTextField.vue')['default']
     AppNavDrawer: typeof import('./src/components/layout/AppNavDrawer.vue')['default']
+    AppNavExternalItem: typeof import('./src/components/ui/AppNavExternalItem.vue')['default']
     AppNavItem: typeof import('./src/components/ui/AppNavItem.vue')['default']
+    AppNavLinkIcon: typeof import('./src/components/ui/AppNavLinkIcon.vue')['default']
     AppNotificationMenu: typeof import('./src/components/layout/AppNotificationMenu.vue')['default']
     AppObservedColumn: typeof import('./src/components/layout/AppObservedColumn.vue')['default']
     AppQrCode: typeof import('./src/components/ui/AppQrCode.vue')['default']
@@ -79,6 +81,7 @@ declare module 'vue' {
     VAlert: typeof import('vuetify/lib')['VAlert']
     VApp: typeof import('vuetify/lib')['VApp']
     VAppBar: typeof import('vuetify/lib')['VAppBar']
+    VAutocomplete: typeof import('vuetify/lib')['VAutocomplete']
     VBadge: typeof import('vuetify/lib')['VBadge']
     VBtn: typeof import('vuetify/lib')['VBtn']
     VBtnToggle: typeof import('vuetify/lib')['VBtnToggle']

src/App.vue

@@ -4,7 +4,10 @@
     :class="{ 'no-pointer-events': dragState }"
   >
     <app-tools-drawer v-model="toolsdrawer" />
-    <app-nav-drawer v-model="navdrawer" />
+    <app-nav-drawer
+      v-model="navdrawer"
+      :sidebar-expanded.sync="sidebarExpanded"
+    />
 
     <inline-svg
       v-if="showBackgroundLogo && !isMobileViewport"
@@ -15,6 +18,7 @@
     <app-bar
       @toolsdrawer="handleToolsDrawerChange"
       @navdrawer="handleNavDrawerChange"
+      @sidebarExpand="handleSidebarExpandToggle"
     />
 
     <flash-message
@@ -380,6 +384,22 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     this.navdrawer = !this.navdrawer
   }
 
+  get sidebarExpanded (): boolean {
+    return this.$typedState.config.uiSettings.navigation?.sidebarExpanded ?? false
+  }
+
+  set sidebarExpanded (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.navigation.sidebarExpanded',
+      value,
+      server: true
+    })
+  }
+
+  handleSidebarExpandToggle () {
+    this.sidebarExpanded = !this.sidebarExpanded
+  }
+
   handleDragOver (event: DragEvent) {
     if (
       this.socketConnected &&

src/components/layout/AppBar.vue

@@ -6,13 +6,14 @@
     :color="$vuetify.theme.currentTheme.appbar"
     :height="$globals.HEADER_HEIGHT"
   >
-    <router-link
+    <div
       v-if="!isMobileViewport"
-      :to="{ name: 'home' }"
       class="toolbar-logo"
+      style="cursor: pointer;"
+      @click="$emit('sidebarExpand')"
     >
       <app-icon />
-    </router-link>
+    </div>
 
     <div class="toolbar-title">
       <app-btn