From 91dea9910d66f090232d52e1f852d18d3c8deab4 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 10 Aug 2025 16:54:50 +0200
Subject: [PATCH] Move MonacoUSA logo from global overlay to dashboard nav
 toggle

Remove global fixed-position logo from app.vue and integrate it as the navigation drawer toggle button in the dashboard layout's app bar. This improves the layout by eliminating overlay positioning issues while maintaining logo visibility and functionality.
---
 app.vue               | 75 ++-----------------------------------------
 layouts/dashboard.vue | 13 +++++++-
 2 files changed, 15 insertions(+), 73 deletions(-)

diff --git a/app.vue b/app.vue
index b27fd21..8507adc 100644
--- a/app.vue
+++ b/app.vue
@@ -1,19 +1,7 @@
 <template>
-  <div class="app-container">
-    <!-- Global MonacoUSA Logo - appears on all pages -->
-    <div class="global-logo">
-      <MonacoUSALogo 
-        size="small" 
-        variant="white" 
-        clickable 
-        @click="handleLogoClick" 
-      />
-    </div>
-    
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 
 <script setup lang="ts">
@@ -23,61 +11,4 @@ useHead({
     return titleChunk ? `${titleChunk} • MonacoUSA Portal` : 'MonacoUSA Portal';
   },
 });
-
-// Handle logo click - navigate to home/dashboard
-const handleLogoClick = () => {
-  navigateTo('/');
-};
 </script>
-
-<style>
-.app-container {
-  position: relative;
-  min-height: 100vh;
-}
-
-.global-logo {
-  position: fixed;
-  top: 16px;
-  right: 16px;
-  z-index: 2000; /* Higher than dashboard drawer and other elements */
-  pointer-events: auto;
-}
-
-/* Adjust positioning on mobile */
-@media (max-width: 768px) {
-  .global-logo {
-    top: 12px;
-    right: 12px;
-  }
-}
-
-/* Ensure logo doesn't interfere with dashboard layout */
-@media (min-width: 1280px) {
-  .global-logo {
-    top: 20px;
-    right: 20px;
-  }
-}
-
-/* Hide logo on very small screens if needed */
-@media (max-width: 320px) {
-  .global-logo {
-    display: none;
-  }
-}
-
-/* Print styles - hide logo when printing */
-@media print {
-  .global-logo {
-    display: none !important;
-  }
-}
-
-/* Accessibility - ensure logo doesn't block important content */
-@media (prefers-reduced-motion: reduce) {
-  .global-logo {
-    transition: none !important;
-  }
-}
-</style>
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index 1ca029c..597004c 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -90,7 +90,18 @@
     </v-navigation-drawer>
     
     <v-app-bar app color="primary" elevation="2">
-      <v-app-bar-nav-icon @click="drawer = !drawer" color="white" />
+      <!-- MonacoUSA Logo as Navigation Toggle -->
+      <v-btn
+        variant="text"
+        @click="drawer = !drawer"
+        class="mr-2"
+      >
+        <MonacoUSALogo 
+          size="small" 
+          variant="white"
+          clickable
+        />
+      </v-btn>
       
       <v-toolbar-title class="text-white font-weight-bold">
         MonacoUSA Portal