ADD: MobileView composable

src/components/NavSidebar.vue

 <script setup lang="ts">
 import type { SidebarProps } from './ui/sidebar'
+import { useMobileView } from '@/components/useMobileView'
 
 const props = defineProps<SidebarProps>()
 
+const isMobile = useMobileView()
 // This is sample data.
 const data = {
   navMain: [

src/components/TopBar.vue

 <script setup lang="ts">
-import { useMediaQuery } from '@vueuse/core'
+import { useMobileView } from '@/components/useMobileView'
 
-const isMobile = useMediaQuery('(max-width: 768px)')
+const isMobile = useMobileView()
 </script>
 
 <template>
   <div h-14 b-b bg-background>
-    <div flex gap-2 justify-center p-2>
+    <div flex justify-center gap-2 p-2>
       <NavSidebarButton v-if="isMobile" />
       <GlobalSearch />
       <UserNav />

src/components/ui/sidebar/SidebarProvider.vue

 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { useEventListener, useVModel } from '@vueuse/core'
 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 {useMobileView} from "@/components/useMobileView";
 
 const props = withDefaults(defineProps<{
   defaultOpen?: boolean
@@ -21,7 +22,7 @@ const emits = defineEmits<{
   'update:open': [open: boolean]
 }>()
 
-const isMobile = useMediaQuery('(max-width: 768px)')
+const isMobile = useMobileView()
 const openMobile = ref(false)
 
 const open = useVModel(props, 'open', emits, {

src/components/useMobileView.ts

+import { useMediaQuery } from '@vueuse/core'
+
+export function useMobileView() {
+  return useMediaQuery('(max-width: 768px)')
+}