feat: refactor menu content section for improved structure and responsiveness across account and help pages

src/app/features/store/components/menu-content-section/menu-content-section.component.html

@@ -1,5 +1,13 @@
 <section class="menu-content-section" [attr.aria-labelledby]="titleId()">
-  <h2 class="menu-content-section__title" [id]="titleId()">{{ title() }}</h2>
+  <header class="menu-content-section__header">
+    <div class="menu-content-section__prefix">
+      <ng-content select="[menuContentPrefix]" />
+    </div>
+
+    <h2 class="menu-content-section__title" [id]="titleId()">
+      {{ title() | uppercase }}
+    </h2>
+  </header>
 
   <div class="menu-content-section__body">
     <ng-content />

src/app/features/store/components/menu-content-section/menu-content-section.component.scss

@@ -8,8 +8,19 @@
   width: 100%;
 }
 
+.menu-content-section__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.menu-content-section__prefix:empty {
+  display: none;
+}
+
 .menu-content-section__title {
-  margin: 0 0 1.25rem;
+  margin: 0;
   color: #888888;
   font-size: 1rem;
   font-weight: 600;
@@ -25,7 +36,18 @@
     margin-inline: auto;
   }
 
+  .menu-content-section__header {
+    position: relative;
+    justify-content: center;
+  }
+
+  .menu-content-section__prefix:not(:empty) {
+    position: absolute;
+    left: 0;
+  }
+
   .menu-content-section__title {
+    width: 100%;
     text-align: center;
   }
 }

src/app/features/store/components/menu-content-section/menu-content-section.component.spec.ts

@@ -1,13 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { describe, expect, it } from 'vitest';
 
+import { Tenant } from '../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../core/services/tenant.service';
 import { MenuContentSectionComponent } from './menu-content-section.component';
 
 @Component({
   imports: [MenuContentSectionComponent],
   template: `
-    <app-menu-content-section title="Contacto" titleId="contact-title">
+    <app-menu-content-section menuCode="help.contact" titleId="contact-title">
+      <a menuContentPrefix href="/ayuda">Volver</a>
       <p>Contenido proyectado</p>
     </app-menu-content-section>
   `,
@@ -16,7 +19,24 @@ class TestHostComponent {}
 
 describe('MenuContentSectionComponent', () => {
   it('renders an accessible title and projects its content', async () => {
-    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    const tenant = signal({
+      menues: [
+        {
+          id: 1,
+          code: 'help.contact',
+          label: 'Contacto del comercio',
+          parent_menu_code: 'help',
+          content_type: 'static',
+          route: '/ayuda/contacto',
+          submenues: [],
+        },
+      ],
+    } as unknown as Tenant);
+
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+      providers: [{ provide: TenantService, useValue: { tenant: tenant.asReadonly() } }],
+    }).compileComponents();
 
     const fixture = TestBed.createComponent(TestHostComponent);
     fixture.detectChanges();
@@ -25,7 +45,12 @@ describe('MenuContentSectionComponent', () => {
     const section = element.querySelector('section');
 
     expect(section?.getAttribute('aria-labelledby')).toBe('contact-title');
-    expect(element.querySelector('#contact-title')?.textContent?.trim()).toBe('Contacto');
+    expect(element.querySelector('#contact-title')?.textContent?.trim()).toBe(
+      'CONTACTO DEL COMERCIO',
+    );
+    expect(element.querySelector('.menu-content-section__prefix a')?.textContent).toContain(
+      'Volver',
+    );
     expect(element.querySelector('.menu-content-section__body')?.textContent).toContain(
       'Contenido proyectado',
     );

src/app/features/store/components/menu-content-section/menu-content-section.component.ts

@@ -1,11 +1,22 @@
-import { Component, input } from '@angular/core';
+import { UpperCasePipe } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+
+import { findMenu } from '../../../../core/services/menu.utils';
+import { TenantService } from '../../../../core/services/tenant.service';
 
 @Component({
   selector: 'app-menu-content-section',
+  imports: [UpperCasePipe],
   templateUrl: './menu-content-section.component.html',
   styleUrl: './menu-content-section.component.scss',
 })
 export class MenuContentSectionComponent {
-  readonly title = input.required<string>();
+  private readonly tenantService = inject(TenantService);
+
+  readonly menuCode = input.required<string>();
   readonly titleId = input.required<string>();
+
+  protected readonly title = computed(
+    () => findMenu(this.tenantService.tenant()?.menues ?? [], this.menuCode())?.label ?? '',
+  );
 }