You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.2 KiB
43 lines
1.2 KiB
<script setup lang="ts">
|
|
import AppHeader from '~/components/navigation/AppHeader.vue'
|
|
import BottomNav from '~/components/navigation/BottomNav.vue'
|
|
import CartFAB from '~/components/Cart/CartFAB.vue'
|
|
import CartResponsive from '~/components/Cart/CartResponsive.vue'
|
|
import { Toaster } from '~/components/ui/sonner'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex flex-col">
|
|
<!-- New App Header with full navigation -->
|
|
<AppHeader />
|
|
|
|
<!-- Main content with bottom padding for mobile nav -->
|
|
<main class="flex-1 pb-20 md:pb-0">
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<CommonFooter />
|
|
|
|
<!-- Mobile Bottom Navigation -->
|
|
<BottomNav />
|
|
|
|
<!-- Floating Action Button (FAB) for Cart on Product Pages -->
|
|
<CartFAB />
|
|
|
|
<!-- Responsive Cart (slides from right on desktop, bottom on mobile) -->
|
|
<CartResponsive />
|
|
|
|
<!-- Toast Notifications -->
|
|
<Toaster position="top-center" :duration="3000" rich-colors />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Ensure main content doesn't get hidden behind bottom nav on mobile */
|
|
@media (max-width: 768px) {
|
|
main {
|
|
padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
}
|
|
</style>
|
|
|