xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-17 17:26:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

optimize(projects): improve theme drawer responsive width for mobile devices

Browse Source
This commit is contained in:
wenyuan 2025-06-26 00:29:38 +08:00 committed by Soybean
parent f238fcbd47
commit 8439a60070
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/layouts/modules/theme-drawer/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { computed, ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
import AppearanceSettings from './modules/appearance/index.vue';
@ -13,10 +13,19 @@ defineOptions({
const appStore = useAppStore();
const activeTab = ref('appearance');
const drawerWidth = computed(() => {
// On mobile devices, use 90% of viewport width with a maximum of 400px
if (appStore.isMobile) {
return 'min(90vw, 400px)';
}
return 460;
});
</script>
<template>
<NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="460">
<NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="drawerWidth">
<NDrawerContent :title="$t('theme.themeDrawerTitle')" :native-scrollbar="false" closable>
<NTabs v-model:value="activeTab" type="segment" size="medium" class="mb-16px">
<NTab name="appearance" :tab="$t('theme.tabs.appearance')"></NTab>