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

fix: sidebar component mobile #840

Browse Source
This commit is contained in:
whbbit1999 2024-11-11 13:55:59 +08:00
parent 384c87a91c
commit 73c70842ad
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,6 +36,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
<SheetContent <SheetContent
data-sidebar="sidebar" data-sidebar="sidebar"
data-mobile="true" data-mobile="true"
:side="side"
class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
:style="{ :style="{
'--sidebar-width': SIDEBAR_WIDTH_MOBILE, '--sidebar-width': SIDEBAR_WIDTH_MOBILE,

6
apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { useEventListener, useVModel } from '@vueuse/core' import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
import { TooltipProvider } from 'radix-vue' import { TooltipProvider } from 'radix-vue'
import { computed, type HTMLAttributes, type Ref, ref } from 'vue' import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils' import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
@ -18,7 +18,7 @@ const emits = defineEmits<{
'update:open': [open: boolean] 'update:open': [open: boolean]
}>() }>()
const isMobile = ref(false) // useIsMobile() const isMobile = useMediaQuery('(max-width: 768px)') // useIsMobile()
const openMobile = ref(false) const openMobile = ref(false)
const open = useVModel(props, 'open', emits, { const open = useVModel(props, 'open', emits, {
@ -39,7 +39,7 @@ function setOpenMobile(value: boolean) {
// Helper to toggle the sidebar. // Helper to toggle the sidebar.
function toggleSidebar() { function toggleSidebar() {
return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value) return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
} }
useEventListener('keydown', (event: KeyboardEvent) => { useEventListener('keydown', (event: KeyboardEvent) => {

10
packages/cli/src/utils/templates.ts
View File

@ -115,6 +115,16 @@ module.exports = {
DEFAULT: "hsl(var(--card))", DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))", foreground: "hsl(var(--card-foreground))",
}, },
sidebar: {
"DEFAULT": "hsl(var(--sidebar-background))",
"foreground": "hsl(var(--sidebar-foreground))",
"primary": "hsl(var(--sidebar-primary))",
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
"accent": "hsl(var(--sidebar-accent))",
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
"border": "hsl(var(--sidebar-border))",
"ring": "hsl(var(--sidebar-ring))",
},
}, },
borderRadius: { borderRadius: {
xl: "calc(var(--radius) + 4px)", xl: "calc(var(--radius) + 4px)",