feat(layout): Replace top navbar with sidebar layout

- Add new sidebar-based layout components:
  - AppLayout.vue: Main layout wrapper with sidebar + topbar
  - AppSidebar.vue: Desktop sidebar with navigation, theme, language
  - AppTopBar.vue: Top bar with notifications, cart, profile
  - MobileDrawer.vue: Slide-out drawer for mobile navigation
- Add Shadcn Sheet component for mobile drawer
- Update App.vue to use new AppLayout (except login page)
- Rename old Navbar.vue to Navbar.old.vue for reference

Layout structure:
- Desktop: Fixed 288px sidebar + offset content area
- Mobile: Hidden sidebar with drawer triggered from top bar
- Cart only shown when market module is enabled
- Combined notifications (chat unread count)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package-lock.json

@@ -25,7 +25,7 @@
         "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.4",
         "radix-vue": "^1.9.13",
-        "reka-ui": "^2.5.0",
+        "reka-ui": "^2.7.0",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "unique-names-generator": "^4.7.1",
@@ -12172,9 +12172,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.5.0",
+      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
-      "integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
+      "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",

package.json

@@ -34,7 +34,7 @@
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "radix-vue": "^1.9.13",
-    "reka-ui": "^2.5.0",
+    "reka-ui": "^2.7.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "unique-names-generator": "^4.7.1",

src/App.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import Navbar from '@/components/layout/Navbar.vue'
+import AppLayout from '@/components/layout/AppLayout.vue'
-import Footer from '@/components/layout/Footer.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import { Toaster } from '@/components/ui/sonner'
 import 'vue-sonner/style.css'
@@ -20,10 +19,8 @@ useTheme()
 // Initialize preloader
 const marketPreloader = useMarketPreloader()
 
-// Relay hub initialization is now handled by the base module
+// Show layout on all pages except login
-
+const showLayout = computed(() => {
-// Hide navbar on login page
-const showNavbar = computed(() => {
   return route.path !== '/login'
 })
 
@@ -62,21 +59,14 @@ watch(() => auth.isAuthenticated.value, async (isAuthenticated) => {
 
 <template>
   <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+    <!-- Sidebar layout for authenticated pages -->
-      style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
+    <AppLayout v-if="showLayout">
-      <header
-        v-if="showNavbar"
-        class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
-          <Navbar />
-        </nav>
-      </header>
-
-      <main class="flex-1">
       <router-view />
-      </main>
+    </AppLayout>
 
-      <Footer v-if="showNavbar" />
+    <!-- Login page without sidebar -->
+    <div v-else class="min-h-screen">
+      <router-view />
     </div>
 
     <!-- Toast notifications -->

src/components/layout/AppLayout.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AppSidebar from './AppSidebar.vue'
+import AppTopBar from './AppTopBar.vue'
+import MobileDrawer from './MobileDrawer.vue'
+
+const sidebarOpen = ref(false)
+
+const openSidebar = () => {
+  sidebarOpen.value = true
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <!-- Mobile Drawer -->
+    <MobileDrawer v-model:open="sidebarOpen" />
+
+    <!-- Desktop Sidebar (fixed left) -->
+    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+      <AppSidebar />
+    </div>
+
+    <!-- Main content area (offset on desktop) -->
+    <div class="lg:pl-72">
+      <!-- Top Bar -->
+      <AppTopBar @open-sidebar="openSidebar" />
+
+      <!-- Main Content -->
+      <main
+        class="flex-1"
+        style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)"
+      >
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>

src/components/layout/AppSidebar.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from '@/components/theme-provider'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  Home,
+  Calendar,
+  ShoppingBag,
+  MessageSquare,
+  Settings,
+  Sun,
+  Moon
+} from 'lucide-vue-next'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+
+const route = useRoute()
+const { t } = useI18n()
+const { theme, setTheme } = useTheme()
+const { navigation } = useModularNavigation()
+
+// Map navigation items to icons
+const navIcons: Record<string, any> = {
+  '/': Home,
+  '/events': Calendar,
+  '/market': ShoppingBag,
+  '/chat': MessageSquare,
+}
+
+const toggleTheme = () => {
+  setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+// Check if route is active
+const isActive = (href: string) => {
+  if (href === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(href)
+}
+</script>
+
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-background px-6 pb-4">
+    <!-- Logo -->
+    <div class="flex h-16 shrink-0 items-center">
+      <router-link to="/" class="flex items-center gap-2">
+        <img
+          src="@/assets/logo.png"
+          alt="Logo"
+          class="h-8 w-8"
+        />
+        <span class="font-semibold text-foreground">{{ t('nav.title') }}</span>
+      </router-link>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="flex flex-1 flex-col">
+      <ul role="list" class="flex flex-1 flex-col gap-y-7">
+        <!-- Primary Navigation -->
+        <li>
+          <ul role="list" class="-mx-2 space-y-1">
+            <li v-for="item in navigation" :key="item.href">
+              <router-link
+                :to="item.href"
+                :class="[
+                  isActive(item.href)
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  'group flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+                ]"
+              >
+                <component
+                  :is="navIcons[item.href] || Home"
+                  :class="[
+                    isActive(item.href)
+                      ? 'text-accent-foreground'
+                      : 'text-muted-foreground group-hover:text-accent-foreground',
+                    'h-5 w-5 shrink-0'
+                  ]"
+                />
+                {{ item.name }}
+              </router-link>
+            </li>
+          </ul>
+        </li>
+
+        <!-- Secondary Section (placeholder for future use) -->
+        <li>
+          <div class="text-xs font-semibold text-muted-foreground">
+            <!-- Future: Your stalls, subscriptions, etc. -->
+          </div>
+          <ul role="list" class="-mx-2 mt-2 space-y-1">
+            <!-- Empty for now -->
+          </ul>
+        </li>
+
+        <!-- Footer: Settings & Preferences -->
+        <li class="mt-auto space-y-2">
+          <Separator />
+
+          <!-- Theme & Language -->
+          <div class="flex items-center justify-between px-2 py-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="toggleTheme"
+              class="h-8 w-8"
+            >
+              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
+              <Moon v-else class="h-4 w-4" />
+            </Button>
+            <LanguageSwitcher />
+          </div>
+
+          <!-- Settings Link -->
+          <router-link
+            to="/settings"
+            :class="[
+              isActive('/settings')
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              'group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+            ]"
+          >
+            <Settings class="h-5 w-5 shrink-0" />
+            Settings
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>

src/components/layout/AppTopBar.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Menu,
+  Bell,
+  ShoppingCart,
+  User,
+  LogOut,
+  Wallet,
+  Ticket,
+  Store,
+  Activity,
+} from 'lucide-vue-next'
+import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue'
+import LoginDialog from '@/components/auth/LoginDialog.vue'
+import ProfileDialog from '@/components/auth/ProfileDialog.vue'
+import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
+import { auth } from '@/composables/useAuthService'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+import { useMarketStore } from '@/modules/market/stores/market'
+import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
+import appConfig from '@/app.config'
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (e: 'openSidebar'): void
+}>()
+
+const router = useRouter()
+const { userMenuItems } = useModularNavigation()
+const marketStore = useMarketStore()
+
+const showLoginDialog = ref(false)
+const showProfileDialog = ref(false)
+const showLogoutConfirm = ref(false)
+
+// Get PaymentService for wallet balance
+const paymentService = tryInjectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
+
+// Get ChatService for notifications
+const chatService = tryInjectService(SERVICE_TOKENS.CHAT_SERVICE) as any
+
+// Wallet balance
+const totalBalance = computed(() => {
+  return paymentService?.totalBalance || 0
+})
+
+// Combined notifications (chat unread for now)
+const totalNotifications = computed(() => {
+  return chatService?.totalUnreadCount?.value || 0
+})
+
+// Cart item count
+const cartItemCount = computed(() => {
+  return marketStore.totalCartItems
+})
+
+// Check if market module is enabled
+const isMarketEnabled = computed(() => {
+  return appConfig.modules.market?.enabled ?? false
+})
+
+const openLoginDialog = () => {
+  showLoginDialog.value = true
+}
+
+const openProfileDialog = () => {
+  showProfileDialog.value = true
+}
+
+const handleLogout = async () => {
+  try {
+    auth.logout()
+    router.push('/login')
+  } catch (error) {
+    console.error('Logout failed:', error)
+  }
+}
+
+const navigateToNotifications = () => {
+  // For now, navigate to chat since that's our notification source
+  router.push('/chat')
+}
+</script>
+
+<template>
+  <div
+    class="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-x-4 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 sm:gap-x-6 sm:px-6 lg:px-8"
+  >
+    <!-- Mobile menu button -->
+    <Button
+      variant="ghost"
+      size="icon"
+      class="-m-2.5 p-2.5 lg:hidden"
+      @click="emit('openSidebar')"
+    >
+      <span class="sr-only">Open sidebar</span>
+      <Menu class="h-5 w-5" />
+    </Button>
+
+    <!-- Separator (mobile only) -->
+    <div class="h-6 w-px bg-border lg:hidden" aria-hidden="true" />
+
+    <!-- Spacer / Future search area -->
+    <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+      <!-- Search placeholder for future -->
+      <div class="flex-1">
+        <!-- Future: Global search input -->
+      </div>
+
+      <!-- Right side actions -->
+      <div class="flex items-center gap-x-4 lg:gap-x-6">
+        <!-- Notifications (combined) -->
+        <Button
+          v-if="auth.isAuthenticated.value"
+          variant="ghost"
+          size="icon"
+          class="relative"
+          @click="navigateToNotifications"
+        >
+          <span class="sr-only">View notifications</span>
+          <Bell class="h-5 w-5" />
+          <Badge
+            v-if="totalNotifications > 0"
+            class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
+          >
+            {{ totalNotifications > 99 ? '99+' : totalNotifications }}
+          </Badge>
+        </Button>
+
+        <!-- Cart (only when market is enabled) -->
+        <router-link
+          v-if="auth.isAuthenticated.value && isMarketEnabled"
+          to="/cart"
+          class="relative flex items-center justify-center"
+        >
+          <Button variant="ghost" size="icon" class="relative">
+            <span class="sr-only">Shopping cart</span>
+            <ShoppingCart class="h-5 w-5" />
+            <Badge
+              v-if="cartItemCount > 0"
+              class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
+            >
+              {{ cartItemCount > 99 ? '99+' : cartItemCount }}
+            </Badge>
+          </Button>
+        </router-link>
+
+        <!-- Separator -->
+        <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-border" aria-hidden="true" />
+
+        <!-- Profile dropdown -->
+        <div v-if="auth.isAuthenticated.value">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" class="relative flex items-center gap-2">
+                <User class="h-5 w-5" />
+                <span class="hidden lg:block text-sm font-semibold truncate max-w-32">
+                  {{ auth.userDisplay.value?.name || 'Anonymous' }}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" class="w-56">
+              <!-- Wallet Balance -->
+              <DropdownMenuItem @click="() => router.push('/wallet')" class="gap-2">
+                <Wallet class="h-4 w-4 text-muted-foreground" />
+                <CurrencyDisplay :balance-msat="totalBalance" />
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <!-- Profile -->
+              <DropdownMenuItem @click="openProfileDialog" class="gap-2">
+                <User class="h-4 w-4" />
+                Profile
+              </DropdownMenuItem>
+
+              <!-- User menu items (from modules) -->
+              <DropdownMenuItem
+                v-for="item in userMenuItems"
+                :key="item.href"
+                @click="() => router.push(item.href)"
+                class="gap-2"
+              >
+                <component
+                  :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
+                  class="h-4 w-4"
+                />
+                {{ item.name }}
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <!-- Logout -->
+              <DropdownMenuItem
+                @click="showLogoutConfirm = true"
+                class="gap-2 text-destructive"
+              >
+                <LogOut class="h-4 w-4" />
+                Logout
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <!-- Login button (when not authenticated) -->
+        <Button
+          v-else
+          variant="outline"
+          size="sm"
+          @click="openLoginDialog"
+          class="gap-2"
+        >
+          <User class="h-4 w-4" />
+          <span class="hidden sm:inline">Login</span>
+        </Button>
+      </div>
+    </div>
+
+    <!-- Login Dialog -->
+    <LoginDialog v-model:is-open="showLoginDialog" />
+
+    <!-- Profile Dialog -->
+    <ProfileDialog v-model:is-open="showProfileDialog" />
+
+    <!-- Logout Confirm Dialog -->
+    <LogoutConfirmDialog
+      v-model:is-open="showLogoutConfirm"
+      @confirm="handleLogout"
+    />
+  </div>
+</template>

src/components/layout/MobileDrawer.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from '@/components/theme-provider'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  Home,
+  Calendar,
+  ShoppingBag,
+  MessageSquare,
+  Settings,
+  Sun,
+  Moon,
+} from 'lucide-vue-next'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const { theme, setTheme } = useTheme()
+const { navigation } = useModularNavigation()
+
+// Map navigation items to icons
+const navIcons: Record<string, any> = {
+  '/': Home,
+  '/events': Calendar,
+  '/market': ShoppingBag,
+  '/chat': MessageSquare,
+}
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const toggleTheme = () => {
+  setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+// Check if route is active
+const isActive = (href: string) => {
+  if (href === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(href)
+}
+
+// Navigate and close drawer
+const navigateTo = (href: string) => {
+  router.push(href)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <Sheet v-model:open="isOpen">
+    <SheetContent side="left" class="w-72 p-0">
+      <div class="flex h-full flex-col">
+        <!-- Header with Logo -->
+        <SheetHeader class="px-6 py-4 border-b border-border">
+          <SheetTitle class="flex items-center gap-2">
+            <img
+              src="@/assets/logo.png"
+              alt="Logo"
+              class="h-8 w-8"
+            />
+            <span class="font-semibold">{{ t('nav.title') }}</span>
+          </SheetTitle>
+        </SheetHeader>
+
+        <!-- Navigation -->
+        <nav class="flex-1 overflow-y-auto px-4 py-4">
+          <ul role="list" class="space-y-1">
+            <li v-for="item in navigation" :key="item.href">
+              <button
+                @click="navigateTo(item.href)"
+                :class="[
+                  isActive(item.href)
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+                ]"
+              >
+                <component
+                  :is="navIcons[item.href] || Home"
+                  :class="[
+                    isActive(item.href)
+                      ? 'text-accent-foreground'
+                      : 'text-muted-foreground group-hover:text-accent-foreground',
+                    'h-5 w-5 shrink-0'
+                  ]"
+                />
+                {{ item.name }}
+              </button>
+            </li>
+          </ul>
+
+          <!-- Secondary Section Placeholder -->
+          <div class="mt-8">
+            <div class="text-xs font-semibold text-muted-foreground px-2">
+              <!-- Future: Your stalls, subscriptions, etc. -->
+            </div>
+          </div>
+        </nav>
+
+        <!-- Footer -->
+        <div class="border-t border-border px-4 py-4 space-y-2">
+          <!-- Theme & Language -->
+          <div class="flex items-center justify-between px-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="toggleTheme"
+              class="h-8 w-8"
+            >
+              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
+              <Moon v-else class="h-4 w-4" />
+            </Button>
+            <LanguageSwitcher />
+          </div>
+
+          <Separator />
+
+          <!-- Settings Link -->
+          <button
+            @click="navigateTo('/settings')"
+            :class="[
+              isActive('/settings')
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+            ]"
+          >
+            <Settings class="h-5 w-5 shrink-0" />
+            Settings
+          </button>
+        </div>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>

src/components/layout/Navbar.old.vue

@@ -1,3 +1,13 @@
+<!--
+  DEPRECATED: This file is kept for reference only and will be deleted.
+
+  The top navbar layout has been replaced with a sidebar layout.
+  See the new layout components:
+  - AppLayout.vue (main layout wrapper)
+  - AppSidebar.vue (desktop sidebar)
+  - AppTopBar.vue (top bar with notifications, cart, profile)
+  - MobileDrawer.vue (mobile slide-out navigation)
+-->
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'

src/components/ui/sheet/Sheet.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

src/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

src/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SheetVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sheetVariants } from "."
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: SheetVariants["side"]
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

src/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

src/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

src/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

src/components/ui/sheet/index.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>