MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 05:43:51 +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

1
src/stores/settings/appearance.js
View File

@@ -102,7 +102,6 @@ export const useAppearanceSettingsStore = defineStore(
return ![
'friends-locations',
'friend-list',
'charts',
'charts-instance',
'charts-mutual'
].includes(currentRouteName);

46
src/views/Layout/MainLayout.vue
View File

@@ -29,23 +29,22 @@
</RouterView>
</ResizablePanel>
<template v-if="isSideBarTabShow">
<ResizableHandle
with-handle
:class="[
isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
'z-20 [&>div]:-translate-x-1/2'
]"></ResizableHandle>
<ResizablePanel
:default-size="asideDefaultSize"
:min-size="asideMinSize"
:collapsed-size="0"
collapsible
:order="2"
:style="{ maxWidth: `${asideMaxPx}px` }">
<Sidebar></Sidebar>
</ResizablePanel>
</template>
<ResizableHandle
with-handle
:class="[
isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
'z-20 [&>div]:-translate-x-1/2'
]"></ResizableHandle>
<ResizablePanel
ref="asidePanelRef"
:default-size="asideDefaultSize"
:min-size="asideMinSize"
:collapsed-size="0"
collapsible
:order="2"
:style="{ maxWidth: `${asideMaxPx}px` }">
<Sidebar></Sidebar>
</ResizablePanel>
</template>
</ResizablePanelGroup>
</SidebarInset>
@@ -83,7 +82,7 @@
</template>
<script setup>
import { computed, onUnmounted, watch } from 'vue';
import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
@@ -172,6 +171,17 @@
isSideBarTabShow
} = useMainLayoutResizable();
const asidePanelRef = ref(null);
watch(isSideBarTabShow, async (show) => {
await nextTick();
if (show) {
asidePanelRef.value?.expand();
} else {
asidePanelRef.value?.collapse();
}
});
watch(
() => watchState.isLoggedIn,
(isLoggedIn) => {