phere is some code that might help <template>
<div class="min-h-screen bg-gray-100">
<main class="container mx-auto px-4 pt-4 pb-8 relative">
<div class="md:hidden mb-4">
<Sheet>
<SheetTrigger as-child>
<Button variant="ghost" size="icon">
<Menu class="h-5 w-5" />
</Button>
</SheetTrigger>
<SheetContent side="left" class="w-[300px] sm:w-[400px]">
<nav class="flex flex-col space-y-4">
<button
v-for="item in menuItems"
:key="item.value"
@click="activeTab = item.value"
:class="`flex items-center space-x-2 px-4 py-2 rounded-md ${
activeTab === item.value
? 'text-indigo-600 bg-indigo-50'
: 'text-gray-600 hover:text-indigo-600 hover:bg-gray-100'
}`"
>
<component :is="item.icon" class="h-5 w-5" />
<span>{{ item.label }}</span>
</button>
</nav>
</SheetContent>
</Sheet>
</div>
<div class="flex flex-col md:flex-row gap-8">
<aside class="w-full md:w-64 bg-white rounded-lg shadow p-4 hidden md:block">
<div class="flex items-center space-x-4 mb-6">
<img
src="/placeholder.svg?height=64&width=64"
alt="Jacqueline Miller"
class="w-16 h-16 rounded-full"
/>
<div>
<h2 class="font-semibold">Jacqueline Miller</h2>
<p class="text-sm text-gray-500">hello@gmail.com</p>
</div>
</div>
<nav class="space-y-1">
<button
v-for="item in menuItems"
:key="item.value"
@click="activeTab = item.value"
:class="`flex items-center space-x-2 w-full text-left px-3 py-2 rounded-md ${
activeTab === item.value
? 'text-indigo-600 bg-indigo-50'
: 'text-gray-600 hover:text-indigo-600 hover:bg-gray-100'
}`"
>
<component :is="item.icon" class="h-5 w-5" />
<span>{{ item.label }}</span>
</button>
</nav>
</aside>
<div class="flex-1">
<component :is="activeTabComponent" />
</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { Menu, User, BookOpen, Users, CreditCard, Heart, Settings, Trash2, LogOut } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
import ProfileTab from './tabs/ProfileTab.vue'
import BookingsTab from './tabs/BookingsTab.vue'
import TravelersTab from './tabs/TravelersTab.vue'
import PaymentTab from './tabs/PaymentTab.vue'
import WishlistTab from './tabs/WishlistTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'
import DeleteProfileTab from './tabs/DeleteProfileTab.vue'
import SignOutTab from './tabs/SignOutTab.vue'
const menuItems = [
{ icon: User, label: "My Profile", value: "profile" },
{ icon: BookOpen, label: "My Bookings", value: "bookings" },
{ icon: Users, label: "Travelers", value: "travelers" },
{ icon: CreditCard, label: "Payment Details", value: "payment" },
{ icon: Heart, label: "Wishlist", value: "wishlist" },
{ icon: Settings, label: "Settings", value: "settings" },
{ icon: Trash2, label: "Delete Profile", value: "delete" },
{ icon: LogOut, label: "Sign Out", value: "signout" },
]
const activeTab = ref('profile')
const activeTabComponent = computed(() => {
switch (activeTab.value) {
case 'profile':
return ProfileTab
case 'bookings':
return BookingsTab
case 'travelers':
return TravelersTab
case 'payment':
return PaymentTab
case 'wishlist':
return WishlistTab
case 'settings':
return SettingsTab
case 'delete':
return DeleteProfileTab
case 'signout':
return SignOutTab
default:
return ProfileTab
}
})
</script>