From 86207fe454ea613486678d1e832c8855f5cec99e Mon Sep 17 00:00:00 2001 From: Maxim Kim Date: Thu, 31 Oct 2024 09:07:26 +1200 Subject: [PATCH 1/3] feat(Sidebar): add minScreen prop --- apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue index 30b2630a7..6fba1948c 100644 --- a/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue +++ b/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue @@ -13,11 +13,13 @@ const props = withDefaults(defineProps<{ side?: 'left' | 'right' variant?: 'sidebar' | 'floating' | 'inset' collapsible?: 'offcanvas' | 'icon' | 'none' + minScreen?: 'sm' | 'md' | 'lg' class?: HTMLAttributes['class'] }>(), { side: 'left', variant: 'sidebar', collapsible: 'offcanvas', + minScreen: 'md' }) const { isMobile, state, openMobile, setOpenMobile } = useSidebar() @@ -53,6 +55,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar() :data-collapsible="state === 'collapsed' ? collapsible : ''" :data-variant="variant" :data-side="side" + :class="{ 'sm:block': minScreen === 'sm', 'md:block': minScreen === 'md', 'lg:block': minScreen === 'lg' }" >
Date: Thu, 31 Oct 2024 09:25:52 +1200 Subject: [PATCH 2/3] feat(Sidebar): add minScreen prop to default style --- apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue b/apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue index ebbdd30a9..8c817a7cb 100644 --- a/apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue +++ b/apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue @@ -13,11 +13,13 @@ const props = withDefaults(defineProps<{ side?: 'left' | 'right' variant?: 'sidebar' | 'floating' | 'inset' collapsible?: 'offcanvas' | 'icon' | 'none' + minScreen?: 'sm' | 'md' | 'lg' class?: HTMLAttributes['class'] }>(), { side: 'left', variant: 'sidebar', collapsible: 'offcanvas', + minScreen: 'md', }) const { isMobile, state, openMobile, setOpenMobile } = useSidebar() @@ -53,6 +55,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar() :data-collapsible="state === 'collapsed' ? collapsible : ''" :data-variant="variant" :data-side="side" + :class="{ 'sm:block': minScreen === 'sm', 'md:block': minScreen === 'md', 'lg:block': minScreen === 'lg' }" >
Date: Thu, 31 Oct 2024 09:27:20 +1200 Subject: [PATCH 3/3] fix(Sidebar): add commas --- apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue index 6fba1948c..20a6c1685 100644 --- a/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue +++ b/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue @@ -19,7 +19,7 @@ const props = withDefaults(defineProps<{ side: 'left', variant: 'sidebar', collapsible: 'offcanvas', - minScreen: 'md' + minScreen: 'md', }) const { isMobile, state, openMobile, setOpenMobile } = useSidebar() @@ -78,7 +78,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar() variant === 'floating' || variant === 'inset' ? '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', - { 'sm:block': minScreen === 'sm', 'md:block': minScreen === 'md', 'lg:block': minScreen === 'lg' } + { 'sm:block': minScreen === 'sm', 'md:block': minScreen === 'md', 'lg:block': minScreen === 'lg' }, props.class, )" v-bind="$attrs"