dev: hotfix, layout
This commit is contained in:
@@ -8,7 +8,7 @@ const props = defineProps<{
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="cn('p-4 xl:p-5 2xl:p-6', props.class)">
|
<div :class="cn('p-4 2xl:p-5', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ const props = defineProps<{
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<p :class="cn('text-sm text-muted-foreground', props.class)">
|
<p :class="cn('text-xs 2xl:text-sm text-muted-foreground', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ const props = defineProps<{
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="cn('flex items-center p-6 pt-0', props.class)">
|
<div :class="cn('flex items-center p-4 2xl:p-5 pt-0', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="collapsible === 'none'"
|
v-if="collapsible === 'none'"
|
||||||
:class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', props.class)"
|
:class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] flex-col', props.class)"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
@@ -64,7 +64,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
|||||||
<div
|
<div
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
|
'relative h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
|
||||||
'group-data-[collapsible=offcanvas]:w-0',
|
'group-data-[collapsible=offcanvas]:w-0',
|
||||||
'group-data-[side=right]:rotate-180',
|
'group-data-[side=right]:rotate-180',
|
||||||
variant === 'floating' || variant === 'inset'
|
variant === 'floating' || variant === 'inset'
|
||||||
@@ -76,10 +76,10 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
|||||||
<div
|
<div
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
|
'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
|
||||||
side === 'left'
|
side === 'left'
|
||||||
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
|
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:left-[calc(var(--xxl-sidebar-width)*-1)]'
|
||||||
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
|
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:right-[calc(var(--xxl-sidebar-width)*-1)]',
|
||||||
// Adjust the padding for floating and inset variants.
|
// Adjust the padding for floating and inset variants.
|
||||||
variant === 'floating' || variant === 'inset'
|
variant === 'floating' || variant === 'inset'
|
||||||
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
|
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import {
|
|||||||
SIDEBAR_COOKIE_NAME,
|
SIDEBAR_COOKIE_NAME,
|
||||||
SIDEBAR_KEYBOARD_SHORTCUT,
|
SIDEBAR_KEYBOARD_SHORTCUT,
|
||||||
SIDEBAR_WIDTH,
|
SIDEBAR_WIDTH,
|
||||||
|
XXL_SIDEBAR_WIDTH,
|
||||||
SIDEBAR_WIDTH_ICON,
|
SIDEBAR_WIDTH_ICON,
|
||||||
} from './utils'
|
} from './utils'
|
||||||
|
|
||||||
@@ -87,6 +88,7 @@ provideSidebarContext({
|
|||||||
<div
|
<div
|
||||||
:style="{
|
:style="{
|
||||||
'--sidebar-width': SIDEBAR_WIDTH,
|
'--sidebar-width': SIDEBAR_WIDTH,
|
||||||
|
'--xxl-sidebar-width': XXL_SIDEBAR_WIDTH,
|
||||||
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
|
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
|
||||||
}"
|
}"
|
||||||
:class="
|
:class="
|
||||||
|
|||||||
@@ -3,7 +3,8 @@ import { createContext } from 'radix-vue'
|
|||||||
|
|
||||||
export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
|
export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
|
||||||
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||||
export const SIDEBAR_WIDTH = '16rem'
|
export const SIDEBAR_WIDTH = '12rem'
|
||||||
|
export const XXL_SIDEBAR_WIDTH = '14rem'
|
||||||
export const SIDEBAR_WIDTH_MOBILE = '18rem'
|
export const SIDEBAR_WIDTH_MOBILE = '18rem'
|
||||||
export const SIDEBAR_WIDTH_ICON = '3rem'
|
export const SIDEBAR_WIDTH_ICON = '3rem'
|
||||||
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
|
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ const contentFrameClass = computed(() => {
|
|||||||
<LayoutAppSidebar />
|
<LayoutAppSidebar />
|
||||||
<SidebarInset>
|
<SidebarInset>
|
||||||
<LayoutHeader />
|
<LayoutHeader />
|
||||||
<div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
|
<div :class="`w-full p-4 2xl:p-5 flex justify-center ${contentFrameClass}`">
|
||||||
<div v-if="contentFrame !== 'cf-no-frame'">
|
<div v-if="contentFrame !== 'cf-no-frame'">
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user