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
data-sidebar="sidebar"
data-mobile="true"
:side="side"
class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
:style="{
'--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">
import { cn } from '@/lib/utils'
import { useEventListener, useVModel } from '@vueuse/core'
import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
import { TooltipProvider } from 'radix-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'
@ -18,7 +18,7 @@ const emits = defineEmits<{
'update:open': [open: boolean]
}>()
const isMobile = ref(false) // useIsMobile()
const isMobile = useMediaQuery('(max-width: 768px)') // useIsMobile()
const openMobile = ref(false)
const open = useVModel(props, 'open', emits, {
@ -39,7 +39,7 @@ function setOpenMobile(value: boolean) {
// Helper to toggle the sidebar.
function toggleSidebar() {
return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)
return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
}
useEventListener('keydown', (event: KeyboardEvent) => {

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

@ -115,6 +115,16 @@ module.exports = {
DEFAULT: "hsl(var(--card))",
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: {
xl: "calc(var(--radius) + 4px)",