MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 06:56:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Allow sidebar use panel collapse/expand instead of conditional rendering

Browse Source
This commit is contained in:
pa
2026-02-26 19:30:33 +09:00
committed by Natsumi
parent 8d80ef43c6
commit 503a7978f5
2 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/stores/settings/appearance.js
-1
View File
@@ -102,7 +102,6 @@ export const useAppearanceSettingsStore = defineStore(
return ![ return ![
'friends-locations', 'friends-locations',
'friend-list', 'friend-list',
'charts',
'charts-instance', 'charts-instance',
'charts-mutual' 'charts-mutual'
].includes(currentRouteName); ].includes(currentRouteName);
src/views/Layout/MainLayout.vue
+28 -18
View File
@@ -29,23 +29,22 @@
</RouterView> </RouterView>
</ResizablePanel> </ResizablePanel>
<template v-if="isSideBarTabShow"> <ResizableHandle
<ResizableHandle with-handle
with-handle :class="[
:class="[ isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0', 'z-20 [&>div]:-translate-x-1/2'
'z-20 [&>div]:-translate-x-1/2' ]"></ResizableHandle>
]"></ResizableHandle> <ResizablePanel
<ResizablePanel ref="asidePanelRef"
:default-size="asideDefaultSize" :default-size="asideDefaultSize"
:min-size="asideMinSize" :min-size="asideMinSize"
:collapsed-size="0" :collapsed-size="0"
collapsible collapsible
:order="2" :order="2"
:style="{ maxWidth: `${asideMaxPx}px` }"> :style="{ maxWidth: `${asideMaxPx}px` }">
<Sidebar></Sidebar> <Sidebar></Sidebar>
</ResizablePanel> </ResizablePanel>
</template>
</template> </template>
</ResizablePanelGroup> </ResizablePanelGroup>
</SidebarInset> </SidebarInset>
@@ -83,7 +82,7 @@
</template> </template>
<script setup> <script setup>
import { computed, onUnmounted, watch } from 'vue'; import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@@ -172,6 +171,17 @@
isSideBarTabShow isSideBarTabShow
} = useMainLayoutResizable(); } = useMainLayoutResizable();
const asidePanelRef = ref(null);
watch(isSideBarTabShow, async (show) => {
await nextTick();
if (show) {
asidePanelRef.value?.expand();
} else {
asidePanelRef.value?.collapse();
}
});
watch( watch(
() => watchState.isLoggedIn, () => watchState.isLoggedIn,
(isLoggedIn) => { (isLoggedIn) => {