84 lines
1.5 KiB
Vue
84 lines
1.5 KiB
Vue
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Global app setup
|
|
useHead({
|
|
titleTemplate: (titleChunk) => {
|
|
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>
|