From 593aa0df12a19eff00601192d2016570de9847a1 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 12:48:25 +0700
Subject: [PATCH] Make map fullscreen behind transparent navbar

---
 app/components/page/CatalogPage.vue | 10 +++++-----
 app/layouts/topnav.vue              |  9 ++++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 4dde499..1075033 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0 relative">
+  <div class="fixed inset-0 flex flex-col">
     <!-- Loading state -->
     <div v-if="loading" class="absolute inset-0 z-50 flex items-center justify-center bg-base-100/80">
       <Card padding="lg">
@@ -28,8 +28,8 @@
       </ClientOnly>
     </div>
 
-    <!-- View toggle (top RIGHT overlay) - works in both modes -->
-    <div class="absolute top-4 right-4 z-20 hidden lg:block">
+    <!-- View toggle (top RIGHT overlay, below header) - works in both modes -->
+    <div class="absolute top-[116px] right-4 z-20 hidden lg:block">
       <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
         <button
           class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
@@ -64,10 +64,10 @@
       </div>
     </div>
 
-    <!-- Left overlay panel (shown when showPanel is true) -->
+    <!-- Left overlay panel (shown when showPanel is true, below header) -->
     <div
       v-if="showPanel"
-      class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
+      class="absolute top-[116px] left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
     >
       <div class="bg-black/30 backdrop-blur-md rounded-xl shadow-lg border border-white/10 p-4 h-full overflow-y-auto text-white">
         <slot name="panel" />
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index f43262d..a2be33b 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -145,11 +145,14 @@ const headerStyle = computed(() => {
 })
 
 // Main content padding-top to compensate for fixed header
+// For catalog section: no padding - map extends behind header
 // 100px = MainNav with search (input + chips)
 // 154px = MainNav + SubNav (orders, seller, settings)
-const mainStyle = computed(() => ({
-  paddingTop: (isHomePage.value || isCatalogSection.value) ? '100px' : '154px'
-}))
+const mainStyle = computed(() => {
+  if (isCatalogSection.value) return { paddingTop: '0' }
+  if (isHomePage.value) return { paddingTop: '100px' }
+  return { paddingTop: '154px' }
+})
 
 // Provide collapsed state to child components (CatalogPage needs it for map positioning)
 provide('headerCollapsed', isHeaderCollapsed)