refactor: update sidebar styles and enhance desktop sidebar functionality

dashboard/src/assets/mdi-subset/materialdesignicons-subset.css

@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 273 icons */
+/* Auto-generated MDI subset – 270 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -160,10 +160,6 @@
   content: "\F0B79";
 }
 
-.mdi-chat-outline::before {
-  content: "\F0EDE";
-}
-
 .mdi-chat-processing::before {
   content: "\F0B7B";
 }
@@ -328,10 +324,6 @@
   content: "\F0CFD";
 }
 
-.mdi-cursor-move::before {
-  content: "\F01BE";
-}
-
 .mdi-database::before {
   content: "\F01BC";
 }
@@ -980,10 +972,6 @@
   content: "\F0666";
 }
 
-.mdi-store::before {
-  content: "\F04DC";
-}
-
 .mdi-subdirectory-arrow-right::before {
   content: "\F060D";
 }

dashboard/src/layouts/full/vertical-header/VerticalHeader.vue

@@ -132,6 +132,11 @@ function toggleChatSidebarFromHeader() {
   customizer.TOGGLE_CHAT_SIDEBAR();
 }
 
+function toggleDesktopSidebarFromHeader() {
+  customizer.Sidebar_drawer = true;
+  customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar);
+}
+
 const getAppUpdaterBridge = (): AstrBotAppUpdaterBridge | null => {
   if (typeof window === "undefined") {
     return null;
@@ -942,7 +947,8 @@ onMounted(async () => {
       icon
       rounded="sm"
       variant="flat"
-      @click.stop="customizer.SET_SIDEBAR_DRAWER"
+      aria-label="Toggle sidebar"
+      @click.stop="toggleDesktopSidebarFromHeader"
     >
       <v-icon>mdi-menu</v-icon>
     </v-btn>
@@ -953,6 +959,7 @@ onMounted(async () => {
       icon
       rounded="sm"
       variant="flat"
+      aria-label="Toggle sidebar"
       @click.stop="customizer.SET_SIDEBAR_DRAWER"
     >
       <v-icon>mdi-menu</v-icon>

dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue

@@ -108,10 +108,11 @@ const maxSidebarWidth = 300;
 const isResizing = ref(false);
 
 const isMobile = window.innerWidth < 768;
-const isRailSidebar = !isMobile;
+const isRailSidebar = computed(() => !isMobile && customizer.mini_sidebar);
 if (isMobile) {
   customizer.Sidebar_drawer = false;
 } else {
+  customizer.Sidebar_drawer = true;
   customizer.SET_MINI_SIDEBAR(true);
 }
 
@@ -166,6 +167,18 @@ function startSidebarResize(event) {
     :rail="isRailSidebar"
   >
     <div class="sidebar-container">
+      <div v-if="!isRailSidebar" class="sidebar-brand">
+        <img
+          class="sidebar-brand-logo"
+          src="@/assets/images/plugin_icon.png"
+          alt="AstrBot logo"
+        >
+        <div class="sidebar-brand-copy">
+          <span class="sidebar-brand-title">AstrBot</span>
+          <span class="sidebar-brand-subtitle">WebUI</span>
+        </div>
+      </div>
+
       <v-list :class="['pa-4', 'listitem', 'flex-grow-1', { 'hidden-scrollbar': isRailSidebar }]" v-model:opened="openedItems" :open-strategy="'multiple'">
         <template v-for="(item, i) in sidebarMenu" :key="item.title || item.to || `sidebar-item-${i}`">
           <NavItem :item="item" class="leftPadding" :rail="isRailSidebar" />
@@ -173,7 +186,7 @@ function startSidebarResize(event) {
       </v-list>
       <div class="sidebar-footer">
         <v-btn class="sidebar-footer-btn" :class="{ 'sidebar-footer-icon-btn': isRailSidebar }" :size="isRailSidebar ? 'default' : 'small'"
-          :variant="isRailSidebar ? 'text' : 'tonal'" :color="isRailSidebar ? undefined : 'primary'" to="/settings"
+          variant="text" to="/settings"
           :prepend-icon="isRailSidebar ? undefined : 'mdi-cog'" :aria-label="t('core.navigation.settings')">
           <v-icon v-if="isRailSidebar" icon="mdi-cog" />
           <template v-else>{{ t('core.navigation.settings') }}</template>
@@ -235,4 +248,75 @@ function startSidebarResize(event) {
 .leftSidebar .v-navigation-drawer__content {
   position: relative;
 }
+
+.leftSidebar:not(.v-navigation-drawer--rail) .sidebar-footer {
+  align-items: stretch;
+  padding: 10px 16px 16px !important;
+  border-top: 1px solid rgba(var(--v-theme-borderLight), 0.35);
+}
+
+.leftSidebar:not(.v-navigation-drawer--rail) .sidebar-footer-btn {
+  width: 100% !important;
+  max-width: none !important;
+  min-height: 40px;
+  justify-content: flex-start !important;
+  border-radius: 12px !important;
+  color: rgba(var(--v-theme-on-surface), 0.76);
+  font-weight: 500;
+  letter-spacing: 0;
+  padding-inline: 12px !important;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease;
+}
+
+.leftSidebar:not(.v-navigation-drawer--rail) .sidebar-footer-btn:hover,
+.leftSidebar:not(.v-navigation-drawer--rail) .sidebar-footer-btn.v-btn--active {
+  color: rgb(var(--v-theme-primary));
+  background: rgba(var(--v-theme-primary), 0.09);
+}
+
+.leftSidebar:not(.v-navigation-drawer--rail) .sidebar-footer-btn :deep(.v-btn__content) {
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 64px;
+  padding: 14px 18px 10px;
+  border-bottom: 1px solid rgba(var(--v-theme-borderLight), 0.35);
+  flex-shrink: 0;
+}
+
+.sidebar-brand-logo {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+  flex: 0 0 auto;
+}
+
+.sidebar-brand-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.1;
+}
+
+.sidebar-brand-title {
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 18px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.sidebar-brand-subtitle {
+  margin-top: 3px;
+  color: rgba(var(--v-theme-on-surface), 0.58);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
 </style>