feat(mobile-fixes-phase4): Complete US-401 - Fix Layout Principal - Ascundere Header Desktop pe Mobil

Implemented by Ralph autonomous loop.
Iteration: 1

Co-Authored-By: Claude <noreply@anthropic.com>

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
-    <!-- Header -->
+    <!-- Desktop Header - hidden on mobile (viewport < 768px) -->
     <AppHeader
-      v-if="authStore.isAuthenticated"
+      v-if="authStore.isAuthenticated && !isMobile"
       title="ROA2WEB"
       brand-link="/reports/dashboard"
       :menu-open="menuOpen"
@@ -15,9 +15,9 @@
       @period-changed="handlePeriodChanged"
     />
 
-    <!-- Slide Menu -->
+    <!-- Desktop Slide Menu - hidden on mobile (viewport < 768px) -->
     <SlideMenu
-      v-if="authStore.isAuthenticated"
+      v-if="authStore.isAuthenticated && !isMobile"
       :is-open="menuOpen"
       :menu-items="enabledMenuItems"
       :current-user="authStore.currentUser"
@@ -25,8 +25,8 @@
       @logout="handleLogout"
     />
 
-    <!-- Main Content -->
-    <main class="main-content" :class="{ 'with-navbar': authStore.isAuthenticated }">
+    <!-- Main Content - with-navbar only on desktop when authenticated -->
+    <main class="main-content" :class="{ 'with-navbar': authStore.isAuthenticated && !isMobile }">
       <router-view />
     </main>
 
@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import AppHeader from '@shared/components/layout/AppHeader.vue'
 import SlideMenu from '@shared/components/layout/SlideMenu.vue'
@@ -52,6 +52,14 @@ import axios from 'axios'
 
 const router = useRouter()
 
+// Mobile detection - reactive with resize listener
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
+const isMobile = computed(() => windowWidth.value < 768)
+
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
+
 // API service for auth and shared endpoints (unified backend)
 const authApi = axios.create({
   baseURL: import.meta.env.BASE_URL + 'api',
@@ -101,6 +109,9 @@ watch(
 
 // Initialize auth and load companies on mount
 onMounted(async () => {
+  // Add resize listener for mobile detection
+  window.addEventListener('resize', handleResize)
+
   console.log('[App] Mounted - initializing auth...')
   await authStore.initializeAuth()
   console.log('[App] Auth initialized, isAuthenticated:', authStore.isAuthenticated)
@@ -116,6 +127,11 @@ onMounted(async () => {
   }
 })
 
+// Cleanup resize listener
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
 // Event handlers
 const handleCompanyChanged = async (company) => {
   console.log('[App] Company changed:', company)