feat: implement menu page layout component and remove old sidebar components for improved structure and responsiveness
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
<div class="menu-page-layout">
|
||||
<aside class="menu-page-layout__sidebar">
|
||||
<h1 class="menu-page-layout__title">{{ menu()?.label }}</h1>
|
||||
<div class="menu-page-layout__divider"></div>
|
||||
|
||||
<nav class="menu-page-layout__nav" [attr.aria-label]="navigationLabel">
|
||||
@for (submenu of submenues(); track submenu.code) {
|
||||
<a
|
||||
class="menu-page-layout__link"
|
||||
[routerLink]="submenu.route"
|
||||
routerLinkActive="menu-page-layout__link--active"
|
||||
>
|
||||
{{ submenu.label }}
|
||||
</a>
|
||||
}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="menu-page-layout__content">
|
||||
<router-outlet />
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,84 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-page-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
|
||||
gap: clamp(3rem, 8vw, 6.25rem);
|
||||
width: 100%;
|
||||
|
||||
&__sidebar,
|
||||
&__content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.75rem;
|
||||
color: #1a1a1a;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1px;
|
||||
margin-bottom: 1.25rem;
|
||||
background: #dedede;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: #888888;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
text-decoration: none;
|
||||
transition: color 150ms ease;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border-radius: 2px;
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.menu-page-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
gap: 0.75rem 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { signal } from '@angular/core';
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { ActivatedRoute, 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 { MenuPageLayoutComponent } from './menu-page-layout.component';
|
||||
|
||||
function createTenant(): Tenant {
|
||||
return {
|
||||
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: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
code: 'help',
|
||||
label: 'Centro de ayuda',
|
||||
parent_menu_code: null,
|
||||
content_type: 'dynamic',
|
||||
route: '/ayuda',
|
||||
submenues: [
|
||||
{
|
||||
id: 5,
|
||||
code: 'help.faq',
|
||||
label: 'Consultas habituales',
|
||||
parent_menu_code: 'help',
|
||||
content_type: 'dynamic',
|
||||
route: '/ayuda/preguntas-frecuentes',
|
||||
submenues: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
async function renderLayout(menuCode: string, navigationLabel: string): Promise<HTMLElement> {
|
||||
const tenant = signal(createTenant());
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [MenuPageLayoutComponent],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: {
|
||||
snapshot: {
|
||||
data: { menuCode, navigationLabel },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: TenantService,
|
||||
useValue: { tenant: tenant.asReadonly() },
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(MenuPageLayoutComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
return fixture.nativeElement as HTMLElement;
|
||||
}
|
||||
|
||||
describe('MenuPageLayoutComponent', () => {
|
||||
it('renders the configured account menu and its navigation label', async () => {
|
||||
const element = await renderLayout('account', 'Secciones de mi cuenta');
|
||||
const links = Array.from(
|
||||
element.querySelectorAll<HTMLAnchorElement>('.menu-page-layout__link'),
|
||||
);
|
||||
|
||||
expect(element.querySelector('.menu-page-layout__title')?.textContent?.trim()).toBe(
|
||||
'Mi cuenta',
|
||||
);
|
||||
expect(element.querySelector('nav')?.getAttribute('aria-label')).toBe('Secciones de 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',
|
||||
]);
|
||||
});
|
||||
|
||||
it('uses the same component for the help menu', async () => {
|
||||
const element = await renderLayout('help', 'Secciones de ayuda');
|
||||
|
||||
expect(element.querySelector('.menu-page-layout__title')?.textContent?.trim()).toBe(
|
||||
'Centro de ayuda',
|
||||
);
|
||||
expect(element.querySelector('.menu-page-layout__link')?.textContent?.trim()).toBe(
|
||||
'Consultas habituales',
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Component, computed, inject } from '@angular/core';
|
||||
import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
|
||||
|
||||
import { findMenu } from '../../../../core/services/menu.utils';
|
||||
import { TenantService } from '../../../../core/services/tenant.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu-page-layout',
|
||||
imports: [RouterLink, RouterLinkActive, RouterOutlet],
|
||||
templateUrl: './menu-page-layout.component.html',
|
||||
styleUrl: './menu-page-layout.component.scss',
|
||||
})
|
||||
export class MenuPageLayoutComponent {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly tenantService = inject(TenantService);
|
||||
|
||||
protected readonly navigationLabel =
|
||||
(this.route.snapshot.data['navigationLabel'] as string | undefined) ?? 'Secciones';
|
||||
|
||||
private readonly menuCode = this.route.snapshot.data['menuCode'] as string | undefined;
|
||||
|
||||
protected readonly menu = computed(() =>
|
||||
findMenu(this.tenantService.tenant()?.menues ?? [], this.menuCode ?? ''),
|
||||
);
|
||||
protected readonly submenues = computed(() => this.menu()?.submenues ?? []);
|
||||
}
|
||||
Reference in New Issue
Block a user