From 73c70842ad735c1f0a7860cbacfd42bb9c44626e Mon Sep 17 00:00:00 2001
From: whbbit1999 <luckyboy_dong@sina.com>
Date: Mon, 11 Nov 2024 13:55:59 +0800
Subject: [PATCH] fix: sidebar component mobile #840

---
 .../src/lib/registry/default/ui/sidebar/Sidebar.vue    |  1 +
 .../registry/default/ui/sidebar/SidebarProvider.vue    |  6 +++---
 packages/cli/src/utils/templates.ts                    | 10 ++++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

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 ebbdd30a..9f0aa2c7 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue
@@ -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,
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue b/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
index 8f06c67b..a880cd7a 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
@@ -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) => {
diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts
index 69ea1367..42eba54a 100644
--- a/packages/cli/src/utils/templates.ts
+++ b/packages/cli/src/utils/templates.ts
@@ -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)",