added dark mode 2

src/core/components/ThemeMenuSection.vue

@@ -1,27 +1,42 @@
 <template>
-  <AMenuItemGroup title="پوسته">
-    <AMenuItem
-      v-for="opt in themeOptions"
-      :key="opt.value"
-      @click="darkmode.setSchema(opt.value)"
+  <AMenuItem key="theme" class="theme-menu-entry" @click.stop>
+    <APopover
+      v-model:open="open"
+      trigger="click"
+      placement="leftTop"
+      overlay-class-name="theme-menu-popover"
     >
-      <div class="theme-menu-item" :class="{ 'theme-menu-item--active': colorSchema === opt.value }">
-        <div class="theme-menu-item__main">
-          <Icon :icon="opt.icon" size="18" />
-          <span>{{ opt.label }}</span>
+      <template #content>
+        <div class="theme-menu-panel">
+          <button
+            v-for="opt in themeOptions"
+            :key="opt.value"
+            type="button"
+            class="theme-menu-panel__option"
+            :class="{ 'theme-menu-panel__option--active': colorSchema === opt.value }"
+            @click="selectSchema(opt.value)"
+          >
+            <Icon :icon="opt.icon" size="18" />
+            <span>{{ opt.label }}</span>
+            <Icon
+              v-if="colorSchema === opt.value"
+              icon="vuesax-linear:tick-circle"
+              size="16"
+              class="theme-menu-panel__check"
+            />
+          </button>
+          <div v-if="colorSchema === 'auto'" class="theme-menu-panel__hint">
+            وضعیت فعلی: {{ isDark ? 'تاریک' : 'روشن' }}
+          </div>
         </div>
-        <Icon
-          v-if="colorSchema === opt.value"
-          icon="vuesax-linear:tick-circle"
-          size="16"
-          class="theme-menu-item__check"
-        />
+      </template>
+      <div class="theme-menu-entry__trigger">
+        <Icon :icon="triggerIcon" size="18" />
+        <span>پوسته</span>
+        <Icon icon="vuesax-linear:arrow-left" size="14" class="theme-menu-entry__arrow" />
       </div>
-    </AMenuItem>
-    <AMenuItem v-if="colorSchema === 'auto'" disabled class="theme-menu-hint-item">
-      <span class="theme-menu-hint">وضعیت فعلی: {{ isDark ? 'تاریک' : 'روشن' }}</span>
-    </AMenuItem>
-  </AMenuItemGroup>
+    </APopover>
+  </AMenuItem>
   <AMenuDivider />
 </template>
 
@@ -29,8 +44,10 @@
 import Icon from '@core/components/BaseIcon/src/Icon.vue'
 import { useAdminTheme } from '@core/composable/useAdminTheme'
 import type { DarkModeSchema } from '@core/stores/darkmode'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
+const open = ref(false)
 const { isDark, darkmode } = useAdminTheme()
 const { colorSchema } = storeToRefs(darkmode)
 
@@ -39,45 +56,99 @@ const themeOptions: Array<{ value: DarkModeSchema; label: string; icon: string }
   { value: 'dark', label: 'تاریک', icon: 'vuesax-linear:moon' },
   { value: 'auto', label: 'سیستم', icon: 'vuesax-linear:monitor' }
 ]
+
+const triggerIcon = computed(() => {
+  if (colorSchema.value === 'dark') return 'vuesax-linear:moon'
+  if (colorSchema.value === 'light') return 'vuesax-linear:sun-1'
+  return 'vuesax-linear:monitor'
+})
+
+function selectSchema(schema: DarkModeSchema) {
+  darkmode.setSchema(schema)
+  open.value = false
+}
 </script>
 
 <style lang="less" scoped>
-.theme-menu-item {
+.theme-menu-entry {
+  padding: 0 !important;
+}
+
+.theme-menu-entry__trigger {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
   width: 100%;
   min-width: 10rem;
+  padding: 5px 12px;
+  cursor: pointer;
 }
 
-.theme-menu-item__main {
+.theme-menu-entry__arrow {
+  margin-right: auto;
+  opacity: 0.45;
+}
+
+.theme-menu-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 9rem;
+}
+
+.theme-menu-panel__option {
   display: flex;
   align-items: center;
   gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--admin-text);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: right;
+
+  &:hover {
+    background: var(--admin-bg-hover);
+    color: var(--admin-gold-light);
+  }
+
+  &--active {
+    background: var(--admin-menu-selected);
+    color: var(--admin-menu-selected-text);
+    font-weight: 600;
+  }
 }
 
-.theme-menu-item--active {
-  font-weight: 600;
-}
-
-.theme-menu-item__check {
+.theme-menu-panel__check {
+  margin-right: auto;
   color: var(--admin-gold-light, #d4af37);
 }
 
-.theme-menu-hint-item {
-  height: auto !important;
-  line-height: 1.3 !important;
-  cursor: default !important;
-  opacity: 1 !important;
-}
-
-.theme-menu-hint {
+.theme-menu-panel__hint {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid var(--admin-border);
   font-size: 11px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--admin-text-secondary);
 }
+</style>
 
-html.is-dark .theme-menu-hint {
-  color: rgba(255, 255, 255, 0.45);
+<style lang="less">
+.theme-menu-popover {
+  .ant-popover-inner {
+    background: var(--admin-bg-elevated);
+    border: 1px solid var(--admin-border-strong);
+  }
+
+  .ant-popover-inner-content {
+    padding: 8px;
+  }
+
+  .ant-popover-arrow-content::before {
+    background: var(--admin-bg-elevated);
+  }
 }
 </style>