feat(mobile-navigation-improvements): Complete US-202 - MobileDrawerMenu Material Design cu Profil
Implemented by Ralph autonomous loop. Iteration: 2 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -58,8 +58,8 @@
|
||||
"Dark mode support",
|
||||
"npm run build passes"
|
||||
],
|
||||
"passes": false,
|
||||
"notes": ""
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 2"
|
||||
},
|
||||
{
|
||||
"id": "US-208",
|
||||
|
||||
@@ -10,3 +10,9 @@ User Stories: 14 (US-201 to US-214)
|
||||
[2026-01-12 12:03:07] Working on story: US-201
|
||||
[2026-01-12 12:03:07] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_1_US-201.log)
|
||||
[2026-01-12 12:05:02] SUCCESS: Story US-201 passed!
|
||||
[2026-01-12 12:05:02] Changes committed
|
||||
[2026-01-12 12:05:02] Progress: 1/14 stories completed
|
||||
[2026-01-12 12:05:04] === Iteration 2/100 ===
|
||||
[2026-01-12 12:05:04] Working on story: US-202
|
||||
[2026-01-12 12:05:04] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_2_US-202.log)
|
||||
[2026-01-12 12:07:29] SUCCESS: Story US-202 passed!
|
||||
|
||||
579
src/shared/components/mobile/MobileDrawerMenu.vue
Normal file
579
src/shared/components/mobile/MobileDrawerMenu.vue
Normal file
@@ -0,0 +1,579 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="drawer">
|
||||
<div v-if="modelValue" class="drawer-overlay" @click.self="close">
|
||||
<nav class="drawer-menu" ref="drawerRef">
|
||||
<!-- Header with Logo -->
|
||||
<div class="drawer-header">
|
||||
<div class="drawer-logo">
|
||||
<i class="pi pi-building"></i>
|
||||
<span class="logo-text">ROA2WEB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Navigation Section -->
|
||||
<div class="drawer-section">
|
||||
<ul class="drawer-nav">
|
||||
<li v-for="item in navigationItems" :key="item.to">
|
||||
<router-link
|
||||
:to="item.to"
|
||||
class="drawer-link"
|
||||
:class="{ 'active': isActive(item.to, item.exactMatch) }"
|
||||
@click="handleNavClick"
|
||||
>
|
||||
<i :class="['drawer-icon', item.icon]"></i>
|
||||
<span class="drawer-label">{{ item.label }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="drawer-divider"></div>
|
||||
|
||||
<!-- Profile Section (at bottom) -->
|
||||
<div class="drawer-profile">
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">
|
||||
<i class="pi pi-user"></i>
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<span class="profile-name">{{ displayName }}</span>
|
||||
<span class="profile-role">Utilizator</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="drawer-link logout-link"
|
||||
@click="handleLogout"
|
||||
>
|
||||
<i class="drawer-icon pi pi-sign-out"></i>
|
||||
<span class="drawer-label">Deconectare</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
/**
|
||||
* MobileDrawerMenu - Material Design 3 inspired navigation drawer for mobile
|
||||
*
|
||||
* Props:
|
||||
* - modelValue (v-model): Controls visibility of the drawer
|
||||
* - user: Optional user object with { username } for profile display
|
||||
* - onLogout: Optional callback function for logout action
|
||||
*
|
||||
* Events:
|
||||
* - update:modelValue: Emitted when visibility changes (for v-model support)
|
||||
* - logout: Emitted when logout is clicked (if no onLogout prop)
|
||||
*
|
||||
* Features:
|
||||
* - Slide-in animation from left
|
||||
* - Header with logo
|
||||
* - Main navigation links (Dashboard, Bonuri, Facturi, Balanță, Trezorerie, Setări)
|
||||
* - Active state highlighting based on current route
|
||||
* - Profile section with user name and logout button
|
||||
* - Close on tap outside or on link click
|
||||
* - Full dark mode support
|
||||
* - Teleported to body to avoid z-index issues
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* Controls visibility of the drawer (v-model support)
|
||||
*/
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* User object for profile display
|
||||
* Expected shape: { username: string }
|
||||
*/
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
/**
|
||||
* Optional callback for logout action
|
||||
* If not provided, 'logout' event is emitted
|
||||
*/
|
||||
onLogout: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'logout'])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const drawerRef = ref(null)
|
||||
|
||||
/**
|
||||
* Navigation items for the drawer menu
|
||||
* Based on acceptance criteria: Dashboard, Bonuri, Facturi, Balanță, Trezorerie, Setări
|
||||
*/
|
||||
const navigationItems = [
|
||||
{ to: '/reports/dashboard', icon: 'pi pi-home', label: 'Dashboard', exactMatch: true },
|
||||
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri', exactMatch: false },
|
||||
{ to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi', exactMatch: true },
|
||||
{ to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță', exactMatch: true },
|
||||
{ to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Trezorerie', exactMatch: true },
|
||||
{ to: '/data-entry/ocr-metrics', icon: 'pi pi-cog', label: 'Setări', exactMatch: true }
|
||||
]
|
||||
|
||||
/**
|
||||
* Display name for profile section
|
||||
* Falls back to 'Utilizator' if no user provided
|
||||
*/
|
||||
const displayName = computed(() => {
|
||||
return props.user?.username || 'Utilizator'
|
||||
})
|
||||
|
||||
/**
|
||||
* Check if a navigation item is active based on current route
|
||||
*/
|
||||
const isActive = (to, exactMatch) => {
|
||||
if (exactMatch) {
|
||||
return route.path === to
|
||||
}
|
||||
// For non-exact match, check if current path starts with the route
|
||||
return route.path.startsWith(to)
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the drawer menu
|
||||
*/
|
||||
const close = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle navigation link click - close drawer after navigation
|
||||
*/
|
||||
const handleNavClick = () => {
|
||||
close()
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle logout action
|
||||
* Calls onLogout prop if provided, otherwise emits 'logout' event
|
||||
*/
|
||||
const handleLogout = async () => {
|
||||
if (props.onLogout) {
|
||||
await props.onLogout()
|
||||
} else {
|
||||
emit('logout')
|
||||
}
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ================================================
|
||||
MobileDrawerMenu Component Styles
|
||||
Material Design 3 inspired navigation drawer
|
||||
================================================ */
|
||||
|
||||
/* Overlay background */
|
||||
.drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: var(--z-modal-backdrop);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Main drawer container */
|
||||
.drawer-menu {
|
||||
width: 280px;
|
||||
max-width: 85vw;
|
||||
height: 100%;
|
||||
background: var(--surface-card);
|
||||
box-shadow: var(--shadow-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Header with Logo
|
||||
================================================ */
|
||||
|
||||
.drawer-header {
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: var(--surface-ground);
|
||||
}
|
||||
|
||||
.drawer-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.drawer-logo i {
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Navigation Section
|
||||
================================================ */
|
||||
|
||||
.drawer-section {
|
||||
flex: 1;
|
||||
padding: var(--space-sm) 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.drawer-nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-medium);
|
||||
min-height: 48px;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.drawer-link:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.drawer-link:active {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
/* Active state */
|
||||
.drawer-link.active {
|
||||
background: var(--blue-50);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.drawer-link.active .drawer-icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.drawer-icon {
|
||||
font-size: var(--text-xl);
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
color: var(--text-color-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drawer-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Divider
|
||||
================================================ */
|
||||
|
||||
.drawer-divider {
|
||||
height: 1px;
|
||||
background: var(--surface-border);
|
||||
margin: var(--space-xs) var(--space-md);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Profile Section
|
||||
================================================ */
|
||||
|
||||
.drawer-profile {
|
||||
padding: var(--space-md) 0;
|
||||
border-top: 1px solid var(--surface-border);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--blue-100);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-avatar i {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.profile-role {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
/* Logout link styling */
|
||||
.logout-link {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.logout-link .drawer-icon {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.logout-link:hover {
|
||||
background: var(--red-50);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Slide Animation (Vue Transition)
|
||||
================================================ */
|
||||
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
|
||||
.drawer-enter-active .drawer-menu,
|
||||
.drawer-leave-active .drawer-menu {
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
/* Initial state: invisible + drawer off-screen to left */
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drawer-enter-from .drawer-menu,
|
||||
.drawer-leave-to .drawer-menu {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
/* Final state: visible + drawer in place */
|
||||
.drawer-enter-to,
|
||||
.drawer-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.drawer-enter-to .drawer-menu,
|
||||
.drawer-leave-from .drawer-menu {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Dark Mode Support
|
||||
================================================ */
|
||||
|
||||
/* Manual dark mode via data-theme attribute */
|
||||
[data-theme="dark"] .drawer-overlay {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-menu {
|
||||
background: var(--surface-card);
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-header {
|
||||
background: var(--surface-ground);
|
||||
border-bottom-color: var(--surface-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-logo i {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logo-text {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-link:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-link.active {
|
||||
background: var(--blue-900);
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-link.active .drawer-icon {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-icon {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-divider {
|
||||
background: var(--surface-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-profile {
|
||||
border-top-color: var(--surface-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-avatar {
|
||||
background: var(--blue-900);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-avatar i {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-name {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-role {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logout-link {
|
||||
color: var(--red-400);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logout-link .drawer-icon {
|
||||
color: var(--red-400);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logout-link:hover {
|
||||
background: var(--red-900);
|
||||
}
|
||||
|
||||
/* Auto dark mode (when no manual theme is set) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) .drawer-overlay {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-menu {
|
||||
background: var(--surface-card);
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-header {
|
||||
background: var(--surface-ground);
|
||||
border-bottom-color: var(--surface-border);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-logo i {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .logo-text {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-link:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-link.active {
|
||||
background: var(--blue-900);
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-link.active .drawer-icon {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-icon {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-divider {
|
||||
background: var(--surface-border);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-profile {
|
||||
border-top-color: var(--surface-border);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .profile-avatar {
|
||||
background: var(--blue-900);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .profile-avatar i {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .profile-name {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .profile-role {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .logout-link {
|
||||
color: var(--red-400);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .logout-link .drawer-icon {
|
||||
color: var(--red-400);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .logout-link:hover {
|
||||
background: var(--red-900);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user