feat(mobile-navigation-improvements): Complete US-213 - Actualizare Hamburger Menu în toate paginile

Implemented by Ralph autonomous loop.
Iteration: 10

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

src/modules/data-entry/views/receipts/ReceiptsListView.vue

@@ -54,7 +54,7 @@
       :selection-active="mobileSelectionMode"
       :actions="mobileTopBarActions"
       @back-click="exitMobileSelectionMode"
-      @menu-click="toggleMobileMenu"
+      @menu-click="showDrawer = true"
       @action-click="handleTopBarAction"
     />
 
@@ -128,28 +128,12 @@
     <!-- Mobile More Menu -->
     <Menu ref="moreMenuRef" :model="moreMenuItems" :popup="true" />
 
-    <!-- Mobile Hamburger Menu -->
-    <Sidebar v-model:visible="mobileMenuVisible" position="left" class="mobile-sidebar">
-      <template #header>
-        <div class="sidebar-header">
-          <span class="sidebar-title">ROA2WEB</span>
-        </div>
-      </template>
-      <div class="sidebar-menu">
-        <router-link to="/data-entry" class="sidebar-item active">
-          <i class="pi pi-receipt"></i>
-          <span>Bonuri</span>
-        </router-link>
-        <router-link to="/reports/dashboard" class="sidebar-item">
-          <i class="pi pi-chart-bar"></i>
-          <span>Rapoarte</span>
-        </router-link>
-        <router-link to="/settings" class="sidebar-item">
-          <i class="pi pi-cog"></i>
-          <span>Setări</span>
-        </router-link>
-      </div>
-    </Sidebar>
+    <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+    <MobileDrawerMenu
+      v-model="showDrawer"
+      :user="authStore.user"
+      @logout="handleLogout"
+    />
 
     <!-- Main Card -->
     <!-- Page Header (centered, no icon) - Desktop only -->
@@ -971,14 +955,14 @@ import { useRouter } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
 import { useReceiptsStore } from '@data-entry/stores/receiptsStore'
-import { useCompanyStore } from '@data-entry/stores/sharedStores'
+import { useCompanyStore, useAuthStore } from '@data-entry/stores/sharedStores'
 import { useBatchProgressStore } from '@data-entry/stores/batchProgressStore'
 import Menu from 'primevue/menu'
 import Dialog from 'primevue/dialog'
 import Textarea from 'primevue/textarea'
 import Dropdown from 'primevue/dropdown'
 import Checkbox from 'primevue/checkbox'
-import Sidebar from 'primevue/sidebar' // US-040: Mobile hamburger menu
+import MobileDrawerMenu from '@shared/components/mobile/MobileDrawerMenu.vue'
 import DragDropOverlay from '@data-entry/components/bulk/DragDropOverlay.vue'
 // US-103: Mobile Material Design common components
 import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
@@ -996,6 +980,7 @@ const confirm = useConfirm()
 const store = useReceiptsStore()
 const companyStore = useCompanyStore()
 const batchProgressStore = useBatchProgressStore()
+const authStore = useAuthStore()
 
 // Rejection dialog state
 const rejectDialogVisible = ref(false)
@@ -1053,15 +1038,16 @@ const handleResize = () => {
 }
 
 // US-040: Mobile Android-Native Layout State
-const mobileMenuVisible = ref(false)
+const showDrawer = ref(false)
 const moreMenuRef = ref(null)
 const fabVisible = ref(true)
 let lastScrollY = 0
 let scrollTimeout = null
 
-// US-040: Toggle mobile hamburger menu
-const toggleMobileMenu = () => {
-  mobileMenuVisible.value = !mobileMenuVisible.value
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout()
+  router.push('/login')
 }
 
 // US-040: Toggle more menu (3-dot menu)

src/modules/reports/views/BankCashRegisterView.vue

@@ -6,36 +6,16 @@
       title="Trezorerie"
       :show-menu="true"
       :actions="mobileTopBarActions"
-      @menu-click="toggleMobileMenu"
+      @menu-click="showDrawer = true"
       @action-click="handleTopBarAction"
     />
 
-    <!-- US-109: Mobile Hamburger Menu -->
-    <Sidebar v-model:visible="mobileMenuVisible" position="left" class="mobile-sidebar">
-      <template #header>
-        <div class="sidebar-header">
-          <span class="sidebar-title">ROA2WEB</span>
-        </div>
-      </template>
-      <div class="sidebar-menu">
-        <router-link to="/data-entry" class="sidebar-item">
-          <i class="pi pi-receipt"></i>
-          <span>Bonuri</span>
-        </router-link>
-        <router-link to="/reports/bank-cash-register" class="sidebar-item active">
-          <i class="pi pi-wallet"></i>
-          <span>Trezorerie</span>
-        </router-link>
-        <router-link to="/reports/dashboard" class="sidebar-item">
-          <i class="pi pi-chart-bar"></i>
-          <span>Rapoarte</span>
-        </router-link>
-        <router-link to="/settings" class="sidebar-item">
-          <i class="pi pi-cog"></i>
-          <span>Setări</span>
-        </router-link>
-      </div>
-    </Sidebar>
+    <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+    <MobileDrawerMenu
+      v-model="showDrawer"
+      :user="authStore.user"
+      @logout="handleLogout"
+    />
 
     <!-- US-109: Filter BottomSheet for mobile -->
     <BottomSheet v-model="showFilters">
@@ -413,7 +393,7 @@
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useToast } from "primevue/usetoast";
 import { useTreasuryStore } from "@reports/stores/treasury";
-import { useCompanyStore } from "@reports/stores/sharedStores";
+import { useCompanyStore, useAuthStore } from "@reports/stores/sharedStores";
 import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
 import { format } from "date-fns";
 import { exportToExcel, exportBankCashRegisterPDF } from "@reports/utils/exportUtils";
@@ -422,12 +402,15 @@ import { exportToExcel, exportBankCashRegisterPDF } from "@reports/utils/exportU
 import MobileTopBar from "@shared/components/mobile/MobileTopBar.vue";
 import MobileBottomNav from "@shared/components/mobile/MobileBottomNav.vue";
 import BottomSheet from "@shared/components/mobile/BottomSheet.vue";
-import Sidebar from "primevue/sidebar";
+import MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
+import { useRouter } from "vue-router";
 
 const toast = useToast();
+const router = useRouter();
 const treasuryStore = useTreasuryStore();
 const companyStore = useCompanyStore();
 const periodStore = useAccountingPeriodStore();
+const authStore = useAuthStore();
 
 // State for company selection
 const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
@@ -436,11 +419,12 @@ const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
 const isMobile = ref(window.innerWidth < 768);
 const showFilters = ref(false);
 const actionsMenu = ref(null);
-const mobileMenuVisible = ref(false);
+const showDrawer = ref(false);
 
-// US-109: Toggle mobile hamburger menu
-const toggleMobileMenu = () => {
-  mobileMenuVisible.value = !mobileMenuVisible.value;
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout();
+  router.push('/login');
 };
 
 // US-109: Mobile TopBar actions (filter, refresh, export)

src/modules/reports/views/CacheStatsView.vue

@@ -6,36 +6,16 @@
       title="Statistici Cache"
       :show-menu="true"
       :actions="mobileTopBarActions"
-      @menu-click="toggleMobileMenu"
+      @menu-click="showDrawer = true"
       @action-click="handleTopBarAction"
     />
 
-    <!-- US-111: Mobile Hamburger Menu -->
-    <Sidebar v-if="isMobile" v-model:visible="mobileMenuVisible" position="left" class="mobile-sidebar">
-      <template #header>
-        <div class="sidebar-header">
-          <span class="sidebar-title">ROA2WEB</span>
-        </div>
-      </template>
-      <div class="sidebar-menu">
-        <router-link to="/data-entry" class="sidebar-item">
-          <i class="pi pi-receipt"></i>
-          <span>Bonuri</span>
-        </router-link>
-        <router-link to="/reports/cache-stats" class="sidebar-item active">
-          <i class="pi pi-database"></i>
-          <span>Statistici Cache</span>
-        </router-link>
-        <router-link to="/reports/dashboard" class="sidebar-item">
-          <i class="pi pi-chart-bar"></i>
-          <span>Rapoarte</span>
-        </router-link>
-        <router-link to="/settings" class="sidebar-item">
-          <i class="pi pi-cog"></i>
-          <span>Setări</span>
-        </router-link>
-      </div>
-    </Sidebar>
+    <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+    <MobileDrawerMenu
+      v-model="showDrawer"
+      :user="authStore.user"
+      @logout="handleLogout"
+    />
 
     <!-- Desktop Header -->
     <div class="stats-header" v-if="!isMobile">
@@ -225,7 +205,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useCacheStore } from "@reports/stores/cacheStore";
-import { useCompanyStore } from "@reports/stores/sharedStores";
+import { useCompanyStore, useAuthStore } from "@reports/stores/sharedStores";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
 import Card from "primevue/card";
@@ -237,15 +217,17 @@ import InputSwitch from "primevue/inputswitch";
 import Dialog from "primevue/dialog";
 import RadioButton from "primevue/radiobutton";
 import Message from "primevue/message";
-import Sidebar from "primevue/sidebar";
-
 // US-111: Mobile Material Design components
 import MobileTopBar from "@shared/components/mobile/MobileTopBar.vue";
 import MobileBottomNav from "@shared/components/mobile/MobileBottomNav.vue";
+import MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const cacheStore = useCacheStore();
 const companyStore = useCompanyStore();
 const toast = useToast();
+const authStore = useAuthStore();
 
 const loading = computed(() => cacheStore.isLoading);
 const error = computed(() => cacheStore.error);
@@ -257,11 +239,12 @@ const clearScope = ref("current");
 
 // US-111: Mobile state
 const isMobile = ref(window.innerWidth < 768);
-const mobileMenuVisible = ref(false);
+const showDrawer = ref(false);
 
-// US-111: Toggle mobile hamburger menu
-const toggleMobileMenu = () => {
-  mobileMenuVisible.value = !mobileMenuVisible.value;
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout();
+  router.push('/login');
 };
 
 // US-111: Mobile TopBar actions (refresh only for cache stats)

src/modules/reports/views/DashboardView.vue

@@ -4,7 +4,14 @@
     v-if="isMobile"
     title="Dashboard"
     :show-menu="true"
-    @menu-click="handleMenuClick"
+    @menu-click="showDrawer = true"
+  />
+
+  <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+  <MobileDrawerMenu
+    v-model="showDrawer"
+    :user="authStore.user"
+    @logout="handleLogout"
   />
 
   <main class="main-content" :class="{ 'mobile-layout': isMobile }">
@@ -191,7 +198,8 @@ import TreasuryDualCard from "@reports/components/dashboard/cards/TreasuryDualCa
 import SwipeableCards from "@shared/components/mobile/SwipeableCards.vue";
 import MobileTopBar from "@shared/components/mobile/MobileTopBar.vue";
 import MobileBottomNav from "@shared/components/mobile/MobileBottomNav.vue";
-import { useCompanyStore } from "@reports/stores/sharedStores";
+import MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
+import { useCompanyStore, useAuthStore } from "@reports/stores/sharedStores";
 import { useDashboardStore } from "@reports/stores/dashboard";
 import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
 import api from "@reports/services/api";
@@ -206,10 +214,12 @@ const router = useRouter();
 const companyStore = useCompanyStore();
 const dashboardStore = useDashboardStore();
 const periodStore = useAccountingPeriodStore();
+const authStore = useAuthStore();
 
 // State
 const filteredCompanies = ref([]);
 const isLoading = ref(false);
+const showDrawer = ref(false);
 
 // State pentru carduri
 const monthlyInflows = ref(0);
@@ -537,10 +547,10 @@ const mobileNavItems = computed(() => [
   { to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
 ]);
 
-// Handle hamburger menu click
-const handleMenuClick = () => {
-  // TODO: Will be handled by MobileDrawerMenu in US-202
-  console.log('Menu clicked - drawer will be implemented in US-202');
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout();
+  router.push('/login');
 };
 
 // Computed property pentru luna curentă - folosește perioada din period selector

src/modules/reports/views/InvoicesView.vue

@@ -6,36 +6,16 @@
       title="Facturi"
       :show-menu="true"
       :actions="mobileTopBarActions"
-      @menu-click="toggleMobileMenu"
+      @menu-click="showDrawer = true"
       @action-click="handleTopBarAction"
     />
 
-    <!-- US-107: Mobile Hamburger Menu -->
-    <Sidebar v-model:visible="mobileMenuVisible" position="left" class="mobile-sidebar">
-      <template #header>
-        <div class="sidebar-header">
-          <span class="sidebar-title">ROA2WEB</span>
-        </div>
-      </template>
-      <div class="sidebar-menu">
-        <router-link to="/data-entry" class="sidebar-item">
-          <i class="pi pi-receipt"></i>
-          <span>Bonuri</span>
-        </router-link>
-        <router-link to="/reports/invoices" class="sidebar-item active">
-          <i class="pi pi-file-text"></i>
-          <span>Facturi</span>
-        </router-link>
-        <router-link to="/reports/dashboard" class="sidebar-item">
-          <i class="pi pi-chart-bar"></i>
-          <span>Rapoarte</span>
-        </router-link>
-        <router-link to="/settings" class="sidebar-item">
-          <i class="pi pi-cog"></i>
-          <span>Setări</span>
-        </router-link>
-      </div>
-    </Sidebar>
+    <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+    <MobileDrawerMenu
+      v-model="showDrawer"
+      :user="authStore.user"
+      @logout="handleLogout"
+    />
 
     <!-- US-107: Filter BottomSheet for mobile -->
     <BottomSheet v-model="showFilters">
@@ -395,7 +375,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useToast } from "primevue/usetoast";
-import { useCompanyStore } from "@reports/stores/sharedStores";
+import { useCompanyStore, useAuthStore } from "@reports/stores/sharedStores";
 import { useInvoicesStore } from "@reports/stores/invoices";
 import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
 import { format } from "date-fns";
@@ -406,12 +386,15 @@ import { exportToExcel, exportToPDF } from "@reports/utils/exportUtils";
 import MobileTopBar from "@shared/components/mobile/MobileTopBar.vue";
 import MobileBottomNav from "@shared/components/mobile/MobileBottomNav.vue";
 import BottomSheet from "@shared/components/mobile/BottomSheet.vue";
-import Sidebar from "primevue/sidebar";
+import MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
+import { useRouter } from "vue-router";
 
 const toast = useToast();
+const router = useRouter();
 const companyStore = useCompanyStore();
 const invoicesStore = useInvoicesStore();
 const periodStore = useAccountingPeriodStore();
+const authStore = useAuthStore();
 
 // State
 const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
@@ -419,12 +402,13 @@ const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
 // Mobile state
 const isMobile = ref(window.innerWidth < 768);
 const showFilters = ref(false);
-const mobileMenuVisible = ref(false);
+const showDrawer = ref(false);
 const actionsMenu = ref(null);
 
-// US-107: Toggle mobile hamburger menu
-const toggleMobileMenu = () => {
-  mobileMenuVisible.value = !mobileMenuVisible.value;
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout();
+  router.push('/login');
 };
 
 // US-107: Mobile TopBar actions (refresh + export)

src/modules/reports/views/ServerLogsView.vue

@@ -6,36 +6,16 @@
       title="Loguri Server"
       :show-menu="true"
       :actions="mobileTopBarActions"
-      @menu-click="toggleMobileMenu"
+      @menu-click="showDrawer = true"
       @action-click="handleTopBarAction"
     />
 
-    <!-- US-110: Mobile Hamburger Menu -->
-    <Sidebar v-if="isMobile" v-model:visible="mobileMenuVisible" position="left" class="mobile-sidebar">
-      <template #header>
-        <div class="sidebar-header">
-          <span class="sidebar-title">ROA2WEB</span>
-        </div>
-      </template>
-      <div class="sidebar-menu">
-        <router-link to="/data-entry" class="sidebar-item">
-          <i class="pi pi-receipt"></i>
-          <span>Bonuri</span>
-        </router-link>
-        <router-link to="/reports/server-logs" class="sidebar-item active">
-          <i class="pi pi-file-edit"></i>
-          <span>Loguri Server</span>
-        </router-link>
-        <router-link to="/reports/dashboard" class="sidebar-item">
-          <i class="pi pi-chart-bar"></i>
-          <span>Rapoarte</span>
-        </router-link>
-        <router-link to="/settings" class="sidebar-item">
-          <i class="pi pi-cog"></i>
-          <span>Setări</span>
-        </router-link>
-      </div>
-    </Sidebar>
+    <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+    <MobileDrawerMenu
+      v-model="showDrawer"
+      :user="authStore.user"
+      @logout="handleLogout"
+    />
 
     <!-- Desktop Header -->
     <div class="stats-header" v-if="!isMobile">
@@ -160,12 +140,14 @@ import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import Tag from 'primevue/tag'
-import Sidebar from 'primevue/sidebar'
 import axios from 'axios'
+import { useRouter } from 'vue-router'
 
 // US-110: Mobile Material Design components
 import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
 import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+import MobileDrawerMenu from '@shared/components/mobile/MobileDrawerMenu.vue'
+import { useAuthStore } from '@reports/stores/sharedStores'
 
 // System API - endpoint separat de reports
 const systemApi = axios.create({
@@ -182,6 +164,9 @@ systemApi.interceptors.request.use((config) => {
   return config
 })
 
+const router = useRouter()
+const authStore = useAuthStore()
+
 // State
 const logs = ref([])
 const loading = ref(false)
@@ -202,11 +187,12 @@ let refreshTimer = null
 
 // US-110: Mobile state
 const isMobile = ref(window.innerWidth < 768)
-const mobileMenuVisible = ref(false)
+const showDrawer = ref(false)
 
-// US-110: Toggle mobile hamburger menu
-const toggleMobileMenu = () => {
-  mobileMenuVisible.value = !mobileMenuVisible.value
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout()
+  router.push('/login')
 }
 
 // US-110: Mobile TopBar actions (refresh, export)

src/modules/reports/views/SettingsHubView.vue

@@ -4,7 +4,14 @@
     v-if="isMobile"
     title="Setări"
     :show-menu="true"
-    @menu-click="handleMenuClick"
+    @menu-click="showDrawer = true"
+  />
+
+  <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+  <MobileDrawerMenu
+    v-model="showDrawer"
+    :user="authStore.user"
+    @logout="handleLogout"
   />
 
   <main class="main-content" :class="{ 'mobile-layout': isMobile }">
@@ -77,8 +84,17 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
 import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
 import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+import MobileDrawerMenu from '@shared/components/mobile/MobileDrawerMenu.vue'
+import { useAuthStore } from '@reports/stores/sharedStores'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// State
+const showDrawer = ref(false)
 
 // Detectare mobile - reactive with resize listener
 const windowWidth = ref(window.innerWidth)
@@ -89,10 +105,10 @@ const handleResize = () => {
   windowWidth.value = window.innerWidth
 }
 
-// Handle hamburger menu click
-const handleMenuClick = () => {
-  // TODO: Will be handled by MobileDrawerMenu
-  console.log('Menu clicked - drawer integration pending')
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout()
+  router.push('/login')
 }
 
 // Mobile navigation items - Settings is active on this page

src/modules/reports/views/TrialBalanceView.vue

@@ -6,36 +6,16 @@
       title="Balanță de Verificare"
       :show-menu="true"
       :actions="mobileTopBarActions"
-      @menu-click="toggleMobileMenu"
+      @menu-click="showDrawer = true"
       @action-click="handleTopBarAction"
     />
 
-    <!-- US-108: Mobile Hamburger Menu -->
-    <Sidebar v-model:visible="mobileMenuVisible" position="left" class="mobile-sidebar">
-      <template #header>
-        <div class="sidebar-header">
-          <span class="sidebar-title">ROA2WEB</span>
-        </div>
-      </template>
-      <div class="sidebar-menu">
-        <router-link to="/data-entry" class="sidebar-item">
-          <i class="pi pi-receipt"></i>
-          <span>Bonuri</span>
-        </router-link>
-        <router-link to="/reports/trial-balance" class="sidebar-item active">
-          <i class="pi pi-calculator"></i>
-          <span>Balanță</span>
-        </router-link>
-        <router-link to="/reports/dashboard" class="sidebar-item">
-          <i class="pi pi-chart-bar"></i>
-          <span>Rapoarte</span>
-        </router-link>
-        <router-link to="/settings" class="sidebar-item">
-          <i class="pi pi-cog"></i>
-          <span>Setări</span>
-        </router-link>
-      </div>
-    </Sidebar>
+    <!-- Mobile Drawer Menu (replaces old Sidebar) -->
+    <MobileDrawerMenu
+      v-model="showDrawer"
+      :user="authStore.user"
+      @logout="handleLogout"
+    />
 
     <!-- US-108: Filter BottomSheet for mobile -->
     <BottomSheet v-model="showFilters">
@@ -391,7 +371,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useToast } from "primevue/usetoast";
-import { useCompanyStore } from "@reports/stores/sharedStores";
+import { useCompanyStore, useAuthStore } from "@reports/stores/sharedStores";
 import { useTrialBalanceStore } from "@reports/stores/trialBalance";
 import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
 import { exportToExcel, exportToPDF } from "@reports/utils/exportUtils";
@@ -400,12 +380,15 @@ import { exportToExcel, exportToPDF } from "@reports/utils/exportUtils";
 import MobileTopBar from "@shared/components/mobile/MobileTopBar.vue";
 import MobileBottomNav from "@shared/components/mobile/MobileBottomNav.vue";
 import BottomSheet from "@shared/components/mobile/BottomSheet.vue";
-import Sidebar from "primevue/sidebar";
+import MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
+import { useRouter } from "vue-router";
 
 const toast = useToast();
+const router = useRouter();
 const companyStore = useCompanyStore();
 const trialBalanceStore = useTrialBalanceStore();
 const periodStore = useAccountingPeriodStore();
+const authStore = useAuthStore();
 
 // State
 const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
@@ -413,12 +396,13 @@ const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
 // Mobile state
 const isMobile = ref(window.innerWidth < 768);
 const showFilters = ref(false);
-const mobileMenuVisible = ref(false);
+const showDrawer = ref(false);
 const actionsMenu = ref(null);
 
-// US-108: Toggle mobile hamburger menu
-const toggleMobileMenu = () => {
-  mobileMenuVisible.value = !mobileMenuVisible.value;
+// Handle logout from drawer menu
+const handleLogout = async () => {
+  await authStore.logout();
+  router.push('/login');
 };
 
 // US-108: Mobile TopBar actions (filter + export)