oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(sidebar): smooth collapse transitions

Browse Source
This commit is contained in:
qingyuzhang
2026-04-10 05:16:20 +08:00
parent 00c08c574e
commit 07d2add674
2 changed files with 138 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
frontend/src/components/layout/AppSidebar.vue
View File

@@ -7,20 +7,18 @@
]"
>
<!-- Logo/Brand -->
<div class="sidebar-header">
<div class="sidebar-header" :class="{ 'sidebar-header-collapsed': sidebarCollapsed }">
<!-- Custom Logo or Default Logo -->
<div class="flex h-9 w-9 items-center justify-center overflow-hidden rounded-xl shadow-glow">
<div class="sidebar-logo flex h-9 w-9 items-center justify-center overflow-hidden rounded-xl shadow-glow">
<img v-if="settingsLoaded" :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
</div>
<transition name="fade">
<div v-if="!sidebarCollapsed" class="flex flex-col">
<span class="text-lg font-bold text-gray-900 dark:text-white">
{{ siteName }}
</span>
<!-- Version Badge -->
<VersionBadge :version="siteVersion" />
</div>
</transition>
<div class="sidebar-brand" :class="{ 'sidebar-brand-collapsed': sidebarCollapsed }" :aria-hidden="sidebarCollapsed ? 'true' : 'false'">
<span class="sidebar-brand-title text-lg font-bold text-gray-900 dark:text-white">
{{ siteName }}
</span>
<!-- Version Badge -->
<VersionBadge :version="siteVersion" />
</div>
</div>
<!-- Navigation -->
@@ -34,7 +32,7 @@
:key="item.path"
:to="item.path"
class="sidebar-link mb-1"
:class="{ 'sidebar-link-active': isActive(item.path) }"
:class="{ 'sidebar-link-active': isActive(item.path), 'sidebar-link-collapsed': sidebarCollapsed }"
:title="sidebarCollapsed ? item.label : undefined"
:id="
item.path === '/admin/accounts'
@@ -49,34 +47,31 @@
>
<span v-if="item.iconSvg" class="h-5 w-5 flex-shrink-0 sidebar-svg-icon" v-html="sanitizeSvg(item.iconSvg)"></span>
<component v-else :is="item.icon" class="h-5 w-5 flex-shrink-0" />
<transition name="fade">
<span v-if="!sidebarCollapsed">{{ item.label }}</span>
</transition>
<span class="sidebar-label" :class="{ 'sidebar-label-collapsed': sidebarCollapsed }" :aria-hidden="sidebarCollapsed ? 'true' : 'false'">{{ item.label }}</span>
</router-link>
</div>
<!-- Personal Section for Admin (hidden in simple mode) -->
<div v-if="!authStore.isSimpleMode" class="sidebar-section">
<div v-if="!sidebarCollapsed" class="sidebar-section-title">
{{ t('nav.myAccount') }}
<div class="sidebar-section-title" :class="{ 'sidebar-section-title-collapsed': sidebarCollapsed }" :aria-hidden="sidebarCollapsed ? 'true' : 'false'">
<span class="sidebar-section-title-text" :class="{ 'sidebar-section-title-text-collapsed': sidebarCollapsed }">
{{ t('nav.myAccount') }}
</span>
</div>
<div v-else class="mx-3 my-3 h-px bg-gray-200 dark:bg-dark-700"></div>
<router-link
v-for="item in personalNavItems"
:key="item.path"
:to="item.path"
class="sidebar-link mb-1"
:class="{ 'sidebar-link-active': isActive(item.path) }"
:class="{ 'sidebar-link-active': isActive(item.path), 'sidebar-link-collapsed': sidebarCollapsed }"
:title="sidebarCollapsed ? item.label : undefined"
:data-tour="item.path === '/keys' ? 'sidebar-my-keys' : undefined"
@click="handleMenuItemClick(item.path)"
>
<span v-if="item.iconSvg" class="h-5 w-5 flex-shrink-0 sidebar-svg-icon" v-html="sanitizeSvg(item.iconSvg)"></span>
<component v-else :is="item.icon" class="h-5 w-5 flex-shrink-0" />
<transition name="fade">
<span v-if="!sidebarCollapsed">{{ item.label }}</span>
</transition>
<span class="sidebar-label" :class="{ 'sidebar-label-collapsed': sidebarCollapsed }" :aria-hidden="sidebarCollapsed ? 'true' : 'false'">{{ item.label }}</span>
</router-link>
</div>
</template>
@@ -89,16 +84,14 @@
:key="item.path"
:to="item.path"
class="sidebar-link mb-1"
:class="{ 'sidebar-link-active': isActive(item.path) }"
:class="{ 'sidebar-link-active': isActive(item.path), 'sidebar-link-collapsed': sidebarCollapsed }"
:title="sidebarCollapsed ? item.label : undefined"
:data-tour="item.path === '/keys' ? 'sidebar-my-keys' : undefined"
@click="handleMenuItemClick(item.path)"
>
<span v-if="item.iconSvg" class="h-5 w-5 flex-shrink-0 sidebar-svg-icon" v-html="sanitizeSvg(item.iconSvg)"></span>
<component v-else :is="item.icon" class="h-5 w-5 flex-shrink-0" />
<transition name="fade">
<span v-if="!sidebarCollapsed">{{ item.label }}</span>
</transition>
<span class="sidebar-label" :class="{ 'sidebar-label-collapsed': sidebarCollapsed }" :aria-hidden="sidebarCollapsed ? 'true' : 'false'">{{ item.label }}</span>
</router-link>
</div>
</template>
@@ -110,28 +103,26 @@
<button
@click="toggleTheme"
class="sidebar-link mb-2 w-full"
:class="{ 'sidebar-link-collapsed': sidebarCollapsed }"
:title="sidebarCollapsed ? (isDark ? t('nav.lightMode') : t('nav.darkMode')) : undefined"
>
<SunIcon v-if="isDark" class="h-5 w-5 flex-shrink-0 text-amber-500" />
<MoonIcon v-else class="h-5 w-5 flex-shrink-0" />
<transition name="fade">
<span v-if="!sidebarCollapsed">{{
isDark ? t('nav.lightMode') : t('nav.darkMode')
}}</span>
</transition>
<span class="sidebar-label" :class="{ 'sidebar-label-collapsed': sidebarCollapsed }" :aria-hidden="sidebarCollapsed ? 'true' : 'false'">{{
isDark ? t('nav.lightMode') : t('nav.darkMode')
}}</span>
</button>
<!-- Collapse Button -->
<button
@click="toggleSidebar"
class="sidebar-link w-full"
:class="{ 'sidebar-link-collapsed': sidebarCollapsed }"
:title="sidebarCollapsed ? t('nav.expand') : t('nav.collapse')"
>
<ChevronDoubleLeftIcon v-if="!sidebarCollapsed" class="h-5 w-5 flex-shrink-0" />
<ChevronDoubleRightIcon v-else class="h-5 w-5 flex-shrink-0" />
<transition name="fade">
<span v-if="!sidebarCollapsed">{{ t('nav.collapse') }}</span>
</transition>
<span class="sidebar-label" :class="{ 'sidebar-label-collapsed': sidebarCollapsed }" :aria-hidden="sidebarCollapsed ? 'true' : 'false'">{{ t('nav.collapse') }}</span>
</button>
</div>
</aside>
@@ -659,14 +650,113 @@ onMounted(() => {
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease;
.sidebar-logo {
flex: 0 0 2.25rem;
min-width: 2.25rem;
}
.fade-enter-from,
.fade-leave-to {
.sidebar-header-collapsed {
gap: 0;
padding-left: 1.125rem;
padding-right: 1.125rem;
}
.sidebar-brand {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
transition:
max-width 0.22s ease,
opacity 0.14s ease,
transform 0.14s ease;
max-width: 12rem;
}
.sidebar-brand-collapsed {
max-width: 0;
opacity: 0;
transform: translateX(-4px);
pointer-events: none;
}
.sidebar-brand-title {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-link-collapsed {
gap: 0;
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.sidebar-section-title {
position: relative;
display: flex;
align-items: center;
min-height: 1.25rem;
overflow: hidden;
white-space: nowrap;
}
.sidebar-section-title-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition:
opacity 0.16s ease,
transform 0.16s ease;
}
.sidebar-section-title::after {
content: '';
position: absolute;
left: 0.75rem;
right: 0.75rem;
top: 50%;
height: 1px;
background: rgb(229 231 235);
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.18s ease;
}
.dark .sidebar-section-title::after {
background: rgb(55 65 81);
}
.sidebar-section-title-text-collapsed {
opacity: 0;
transform: translateX(-4px);
}
.sidebar-section-title-collapsed::after {
opacity: 1;
transition-delay: 0.08s;
}
.sidebar-label {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition:
max-width 0.2s ease,
opacity 0.12s ease,
transform 0.12s ease;
max-width: 12rem;
}
.sidebar-label-collapsed {
max-width: 0;
opacity: 0;
transform: translateX(-4px);
pointer-events: none;
}
/* Custom SVG icon in sidebar: inherit color, constrain size */