feat: implement menu page layout component and remove old sidebar components for improved structure and responsiveness
This commit is contained in:
@@ -1,11 +0,0 @@
|
||||
<div class="sidebar-container">
|
||||
<h2 class="sidebar-title">{{ menu()?.label }}</h2>
|
||||
<div class="divider"></div>
|
||||
<nav class="sidebar-nav" aria-label="Secciones de mi cuenta">
|
||||
@for (menu of submenues(); track menu.code) {
|
||||
<a [routerLink]="menu.route" routerLinkActive="active" class="nav-link">
|
||||
{{ menu.label }}
|
||||
</a>
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
@@ -1,35 +0,0 @@
|
||||
.sidebar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #e0e0e0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-link:hover {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.nav-link.active {
|
||||
color: var(--color-primary); /* Blue color matching the image */
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
import { signal } from '@angular/core';
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { Tenant } from '../../../../../../core/services/tenant.interface';
|
||||
import { TenantService } from '../../../../../../core/services/tenant.service';
|
||||
import { AccountSidebar } from './account-sidebar';
|
||||
|
||||
describe('AccountSidebar', () => {
|
||||
it('renders only the account submenus configured for the tenant', async () => {
|
||||
const tenant = signal<Tenant>({
|
||||
id: 1,
|
||||
codigo: 'test',
|
||||
nombre: 'Test',
|
||||
dominio: 'localhost',
|
||||
primary_color: '#000000',
|
||||
secondary_color: '#000000',
|
||||
danger_color: '#000000',
|
||||
success_color: '#000000',
|
||||
header_bg_color: '#ffffff',
|
||||
footer_bg_color: '#ffffff',
|
||||
header_logo: '',
|
||||
footer_logo: '',
|
||||
categories: [],
|
||||
menues: [
|
||||
{
|
||||
id: 1,
|
||||
code: 'account',
|
||||
label: 'Mi cuenta',
|
||||
parent_menu_code: null,
|
||||
content_type: 'dynamic',
|
||||
route: '/mi-cuenta',
|
||||
submenues: [
|
||||
{
|
||||
id: 2,
|
||||
code: 'account.profile',
|
||||
label: 'Datos personales',
|
||||
parent_menu_code: 'account',
|
||||
content_type: 'dynamic',
|
||||
route: '/mi-cuenta/datos-personales',
|
||||
submenues: [],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
code: 'account.purchases',
|
||||
label: 'Mis compras',
|
||||
parent_menu_code: 'account',
|
||||
content_type: 'dynamic',
|
||||
route: '/mi-cuenta/compras',
|
||||
submenues: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AccountSidebar],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{
|
||||
provide: TenantService,
|
||||
useValue: { tenant: tenant.asReadonly() },
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(AccountSidebar);
|
||||
fixture.detectChanges();
|
||||
|
||||
const element = fixture.nativeElement as HTMLElement;
|
||||
const links = Array.from(element.querySelectorAll<HTMLAnchorElement>('.nav-link'));
|
||||
|
||||
expect(element.querySelector('.sidebar-title')?.textContent?.trim()).toBe('Mi cuenta');
|
||||
expect(links.map((link) => link.textContent?.trim())).toEqual([
|
||||
'Datos personales',
|
||||
'Mis compras',
|
||||
]);
|
||||
expect(links.map((link) => link.getAttribute('href'))).toEqual([
|
||||
'/mi-cuenta/datos-personales',
|
||||
'/mi-cuenta/compras',
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
import { Component, computed, inject } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||
|
||||
import { findMenu } from '../../../../../../core/services/menu.utils';
|
||||
import { TenantService } from '../../../../../../core/services/tenant.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-account-sidebar',
|
||||
standalone: true,
|
||||
imports: [RouterLink, RouterLinkActive],
|
||||
templateUrl: './account-sidebar.html',
|
||||
styleUrl: './account-sidebar.scss',
|
||||
})
|
||||
export class AccountSidebar {
|
||||
private readonly tenantService = inject(TenantService);
|
||||
|
||||
protected readonly menu = computed(() =>
|
||||
findMenu(this.tenantService.tenant()?.menues ?? [], 'account'),
|
||||
);
|
||||
protected readonly submenues = computed(() => this.menu()?.submenues ?? []);
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="sidebar-layout">
|
||||
<app-account-sidebar class="account-sidebar"></app-account-sidebar>
|
||||
<div class="account-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
.sidebar-layout {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
gap: 100px;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
.account-sidebar {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.account-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { AccountSidebar } from '../components/account-sidebar/account-sidebar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar-layout',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, AccountSidebar],
|
||||
templateUrl: './sidebar-layout.html',
|
||||
styleUrl: './sidebar-layout.scss',
|
||||
})
|
||||
export class SidebarLayout {}
|
||||
Reference in New Issue
Block a user