nl-blogs/client/src/App.vue

<template>
  <div class="min-h-screen bg-art-bg text-art-text">
    <!-- Global Noise (Only for frontend) -->
    <div v-if="!isAdminOrLogin" class="fixed inset-0 pointer-events-none z-[60] bg-noise opacity-30 mix-blend-overlay"></div>
    
    <!-- Toast Container -->
    <div id="toast-container" class="toast-container"></div>
    
    <!-- Header (Hide on Admin & Login) -->
    <Header v-if="!isAdminOrLogin" />
    
    <!-- Mobile Menu (Hide on Admin & Login) -->
    <MobileMenu v-if="!isAdminOrLogin" />
    
    <!-- Main Content -->
    <!-- Conditional classes: Apply max-w-7xl only for frontend pages -->
    <main :class="[
      isAdminOrLogin ? 'w-full h-full' : 'pt-32 pb-20 px-6 max-w-7xl mx-auto relative z-10'
    ]">
      <router-view />
    </main>
    
    <!-- Footer (Hide on Admin & Login) -->
    <Footer v-if="!isAdminOrLogin" />
    
    <!-- Snippet Modal (Hide on Admin & Login) -->
    <!-- SnippetModal is managed by Snippets.vue page, not here -->
    
    <!-- Inquiry Modal (Hide on Admin & Login) -->
    <InquiryModal v-if="!isAdminOrLogin" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Header from './components/Header.vue'
import MobileMenu from './components/MobileMenu.vue'
import Footer from './components/Footer.vue'
import InquiryModal from './components/InquiryModal.vue'

const route = useRoute()

// Check if current route is Admin or Login page
const isAdminOrLogin = computed(() => {
  const path = route.path
  return path.startsWith('/admin') || path === '/login'
})
</script>