matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move MonacoUSA logo from global overlay to dashboard nav toggle
Build And Push Image / docker (push) Successful in 3m3s Details 

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.
This commit is contained in:
Matt 2025-08-10 16:54:50 +02:00
parent ecae3795ee
commit 91dea9910d
2 changed files with 15 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
app.vue
View File

@ -1,19 +1,7 @@
<template> <template>
<div class="app-container"> <NuxtLayout>
<!-- Global MonacoUSA Logo - appears on all pages --> <NuxtPage />
<div class="global-logo"> </NuxtLayout>
<MonacoUSALogo
size="small"
variant="white"
clickable
@click="handleLogoClick"
/>
</div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -23,61 +11,4 @@ useHead({
return titleChunk ? `${titleChunk} • MonacoUSA Portal` : 'MonacoUSA Portal'; return titleChunk ? `${titleChunk} • MonacoUSA Portal` : 'MonacoUSA Portal';
}, },
}); });
// Handle logo click - navigate to home/dashboard
const handleLogoClick = () => {
navigateTo('/');
};
</script> </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>

13
layouts/dashboard.vue
View File

@ -90,7 +90,18 @@
</v-navigation-drawer> </v-navigation-drawer>
<v-app-bar app color="primary" elevation="2"> <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"> <v-toolbar-title class="text-white font-weight-bold">
MonacoUSA Portal MonacoUSA Portal