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>
2026-01-12 12:36:45 +00:00
parent dc137711ae
commit 4c5d2956d8
10 changed files with 146 additions and 207 deletions
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -183,8 +183,8 @@
        "Desktop păstrează navigarea existentă",
        "npm run build passes"
      ],
-      "passes": false,
-      "notes": ""
+      "passes": true,
+      "notes": "Completed in iteration 10"
    },
    {
      "id": "US-210",
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -58,3 +58,9 @@ User Stories: 14 (US-201 to US-214)
 [2026-01-12 12:23:52] Working on story: US-207
 [2026-01-12 12:23:52] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_9_US-207.log)
 [2026-01-12 12:28:03] SUCCESS: Story US-207 passed!
+[2026-01-12 12:28:03] Changes committed
+[2026-01-12 12:28:03] Progress: 9/14 stories completed
+[2026-01-12 12:28:05] === Iteration 10/100 ===
+[2026-01-12 12:28:05] Working on story: US-213
+[2026-01-12 12:28:05] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_10_US-213.log)
+[2026-01-12 12:36:45] SUCCESS: Story US-213 passed!
--- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue
+++ b/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)
--- a/src/modules/reports/views/BankCashRegisterView.vue
+++ b/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)
--- a/src/modules/reports/views/CacheStatsView.vue
+++ b/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)
--- a/src/modules/reports/views/DashboardView.vue
+++ b/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
--- a/src/modules/reports/views/InvoicesView.vue
+++ b/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)
--- a/src/modules/reports/views/ServerLogsView.vue
+++ b/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)
--- a/src/modules/reports/views/SettingsHubView.vue
+++ b/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
--- a/src/modules/reports/views/TrialBalanceView.vue
+++ b/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)