Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Sidebar): add minScreen prop to default style

Browse Source
This commit is contained in:
Maxim Kim 2024-10-31 09:25:52 +12:00 committed by GitHub
parent 86207fe454
commit 0ad3887bc2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue
View File

@ -13,11 +13,13 @@ const props = withDefaults(defineProps<{
side?: 'left' | 'right' side?: 'left' | 'right'
variant?: 'sidebar' | 'floating' | 'inset' variant?: 'sidebar' | 'floating' | 'inset'
collapsible?: 'offcanvas' | 'icon' | 'none' collapsible?: 'offcanvas' | 'icon' | 'none'
minScreen?: 'sm' | 'md' | 'lg'
class?: HTMLAttributes['class'] class?: HTMLAttributes['class']
}>(), { }>(), {
side: 'left', side: 'left',
variant: 'sidebar', variant: 'sidebar',
collapsible: 'offcanvas', collapsible: 'offcanvas',
minScreen: 'md',
}) })
const { isMobile, state, openMobile, setOpenMobile } = useSidebar() const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
@ -53,6 +55,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
:data-collapsible="state === 'collapsed' ? collapsible : ''" :data-collapsible="state === 'collapsed' ? collapsible : ''"
:data-variant="variant" :data-variant="variant"
:data-side="side" :data-side="side"
:class="{ 'sm:block': minScreen === 'sm', 'md:block': minScreen === 'md', 'lg:block': minScreen === 'lg' }"
> >
<!-- This is what handles the sidebar gap on desktop --> <!-- This is what handles the sidebar gap on desktop -->
<div <div
@ -75,6 +78,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
variant === 'floating' || variant === 'inset' variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]' ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
{ 'sm:block': minScreen === 'sm', 'md:block': minScreen === 'md', 'lg:block': minScreen === 'lg' },
props.class, props.class,
)" )"
v-bind="$attrs" v-bind="$attrs"