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

replace navmenu

Browse Source
This commit is contained in:
pa
2026-01-16 17:11:54 +09:00
committed by Natsumi
parent 9cde6c5bb0
commit 78f3bc512d
9 changed files with 383 additions and 907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/ui/sidebar/SidebarProvider.vue
View File

@@ -22,6 +22,14 @@
type: Boolean,
default: undefined
},
width: {
type: [String, Number],
default: undefined
},
widthIcon: {
type: [String, Number],
default: undefined
},
class: {
type: [String, Array, Object],
default: undefined
@@ -33,10 +41,18 @@
const isMobile = useMediaQuery('(max-width: 768px)');
const openMobile = ref(false);
const open = useVModel(props, 'open', emits, {
defaultValue: props.defaultOpen ?? false,
passive: props.open === undefined
});
let open;
if (props.open === undefined) {
open = useVModel(props, 'open', emits, {
defaultValue: props.defaultOpen ?? false,
passive: true
});
} else {
open = useVModel(props, 'open', emits, {
defaultValue: props.defaultOpen ?? false,
passive: false
});
}
function setOpen(value) {
open.value = value; // emits('update:open', value)
@@ -65,6 +81,23 @@
// This makes it easier to style the sidebar with Tailwind classes.
const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
const normalizeCssSize = (value) => {
if (value === null || value === undefined) {
return undefined;
}
if (typeof value === 'number' && Number.isFinite(value)) {
return `${value}px`;
}
if (typeof value === 'string') {
const trimmed = value.trim();
return trimmed || undefined;
}
return undefined;
};
const cssSidebarWidth = computed(() => normalizeCssSize(props.width) ?? SIDEBAR_WIDTH);
const cssSidebarWidthIcon = computed(() => normalizeCssSize(props.widthIcon) ?? SIDEBAR_WIDTH_ICON);
provideSidebarContext({
state,
open,
@@ -81,8 +114,8 @@
<div
data-slot="sidebar-wrapper"
:style="{
'--sidebar-width': SIDEBAR_WIDTH,
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON
'--sidebar-width': cssSidebarWidth,
'--sidebar-width-icon': cssSidebarWidthIcon
}"
:class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
v-bind="$attrs">