feat(mobile-navigation-improvements): Complete US-201 - MobileBottomNav activ pe Dashboard
Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,16 @@
|
||||
<template>
|
||||
<main class="main-content">
|
||||
<!-- Mobile Top Bar -->
|
||||
<MobileTopBar
|
||||
v-if="isMobile"
|
||||
title="Dashboard"
|
||||
:show-menu="true"
|
||||
@menu-click="handleMenuClick"
|
||||
/>
|
||||
|
||||
<main class="main-content" :class="{ 'mobile-layout': isMobile }">
|
||||
<div class="app-container">
|
||||
<!-- Dashboard Header -->
|
||||
<div class="page-header">
|
||||
<!-- Dashboard Header - only on desktop -->
|
||||
<div v-if="!isMobile" class="page-header">
|
||||
<h1 class="page-title">Dashboard</h1>
|
||||
</div>
|
||||
|
||||
@@ -135,6 +143,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Mobile Bottom Nav -->
|
||||
<MobileBottomNav v-if="isMobile" :items="mobileNavItems" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -147,8 +158,10 @@ import MaturityAndDetailsCard from "@reports/components/dashboard/cards/Maturity
|
||||
import ClientiBalanceCard from "@reports/components/dashboard/cards/ClientiBalanceCard.vue";
|
||||
import FurnizoriBalanceCard from "@reports/components/dashboard/cards/FurnizoriBalanceCard.vue";
|
||||
import TreasuryDualCard from "@reports/components/dashboard/cards/TreasuryDualCard.vue";
|
||||
// Mobile carousel component
|
||||
// Mobile components
|
||||
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 { useDashboardStore } from "@reports/stores/dashboard";
|
||||
import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
|
||||
@@ -486,6 +499,20 @@ const handleResize = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
};
|
||||
|
||||
// Mobile navigation items with 'Rapoarte' active (since Dashboard is /reports/dashboard)
|
||||
const mobileNavItems = computed(() => [
|
||||
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
|
||||
{ icon: 'pi pi-cloud-upload', label: 'Upload' },
|
||||
{ to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte', active: true },
|
||||
{ to: '/data-entry/ocr-metrics', 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');
|
||||
};
|
||||
|
||||
// Computed property pentru luna curentă - folosește perioada din period selector
|
||||
const currentMonthLabel = computed(() => {
|
||||
// Prioritate: period selector > dashboard current period > loading
|
||||
@@ -948,6 +975,12 @@ onUnmounted(() => {
|
||||
<style scoped>
|
||||
/* Dashboard Styles - Using Global Patterns */
|
||||
|
||||
/* Mobile Layout - Padding for fixed top/bottom bars */
|
||||
.main-content.mobile-layout {
|
||||
padding-top: 56px; /* MobileTopBar height */
|
||||
padding-bottom: 56px; /* MobileBottomNav height */
|
||||
}
|
||||
|
||||
/* Company Selection */
|
||||
.company-selection {
|
||||
max-width: 500px;
|
||||
|
||||
Reference in New Issue
Block a user