feat: implement category dropdown and category items page with routing and styling

src/app/core/layout/store-layout/store-header/category-dropdown/category-dropdown.component.html

@@ -0,0 +1,39 @@
+@if (open() && categories().length) {
+  <section class="dropdown-menu show p-2 category-dropdown" role="menu" aria-label="Categorías">
+    @for (category of categories(); track category.id) {
+      <div class="dropdown-submenu">
+        <button
+          type="button"
+          class="dropdown-item d-flex align-items-center justify-content-between gap-3"
+          [class.active]="activeCategory()?.id === category.id"
+          role="menuitem"
+          [attr.aria-expanded]="category.subcategories.length ? activeCategory()?.id === category.id : null"
+          (click)="selectCategory(category)"
+        >
+          <span>{{ category.nombre }}</span>
+          @if (category.subcategories.length) {
+            <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+          }
+        </button>
+
+        @if (activeCategory()?.id === category.id && subcategories().length) {
+          <div class="dropdown-menu show p-2 category-dropdown__submenu">
+            @for (subcategory of subcategories(); track subcategory.id) {
+              <button
+                type="button"
+                class="dropdown-item d-flex align-items-center justify-content-between gap-3"
+                role="menuitem"
+                (click)="categorySelect.emit(subcategory)"
+              >
+                <span>{{ subcategory.nombre }}</span>
+                @if (subcategory.subcategories.length) {
+                  <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+                }
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+  </section>
+}

src/app/core/layout/store-layout/store-header/category-dropdown/category-dropdown.component.scss

@@ -0,0 +1,47 @@
+.category-dropdown {
+  min-width: 240px;
+  background-color: #ffffff;
+  border: 0;
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
+}
+
+.category-dropdown .dropdown-item,
+.category-dropdown .dropdown-item:active {
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.25;
+  color: #8a8a8a;
+  background-color: #ffffff;
+}
+
+.category-dropdown .dropdown-item:hover,
+.category-dropdown .dropdown-item:focus,
+.category-dropdown .dropdown-item.active {
+  color: var(--tenant-primary, var(--bs-primary));
+  background-color: #ffffff;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+
+.category-dropdown__submenu {
+  top: -0.5rem;
+  left: calc(100% - 0.1rem);
+  min-width: 240px;
+  border: 0;
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
+}
+
+@media (max-width: 575.98px) {
+  .category-dropdown__submenu {
+    position: static;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}

src/app/core/layout/store-layout/store-header/category-dropdown/category-dropdown.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal } from '@angular/core';
+
+import { Category } from '../../../../services/tenant.interface';
+
+@Component({
+  selector: 'app-category-dropdown',
+  standalone: true,
+  templateUrl: './category-dropdown.component.html',
+  styleUrl: './category-dropdown.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CategoryDropdownComponent {
+  readonly categories = input<readonly Category[]>([]);
+  readonly open = input(false);
+  readonly categorySelect = output<Category>();
+
+  protected readonly activeCategory = signal<Category | null>(null);
+  protected readonly subcategories = computed(() => this.activeCategory()?.subcategories ?? []);
+
+  constructor() {
+    effect(() => {
+      const categories = this.categories();
+      const activeCategory = this.activeCategory();
+
+      if (!this.open()) {
+        this.activeCategory.set(null);
+        return;
+      }
+
+      if (activeCategory && !categories.some((category) => category.id === activeCategory.id)) {
+        this.activeCategory.set(null);
+      }
+    });
+  }
+
+  protected selectCategory(category: Category): void {
+    if (category.subcategories.length) {
+      this.activeCategory.update((activeCategory) =>
+        activeCategory?.id === category.id ? null : category,
+      );
+      return;
+    }
+
+    this.categorySelect.emit(category);
+  }
+}

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -99,16 +99,28 @@
     </div>
   </div>
 
-  <div>
+  <div class="store-layout__categories">
     <div class="container-xl px-3 px-md-4">
-      <button
-        type="button"
-        class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
-        aria-label="Categorias"
-      >
-        <span>Categorias</span>
-        <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
-      </button>
+      <div class="store-layout__category-menu">
+        <button
+          type="button"
+          class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
+          aria-label="Categorias"
+          aria-controls="store-category-dropdown"
+          [attr.aria-expanded]="isCategoryDropdownOpen()"
+          (click)="toggleCategoryDropdown()"
+        >
+          <span>Categorias</span>
+          <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
+        </button>
+
+        <app-category-dropdown
+          id="store-category-dropdown"
+          [categories]="categories()"
+          [open]="isCategoryDropdownOpen()"
+          (categorySelect)="onCategorySelect($event)"
+        />
+      </div>
     </div>
   </div>
 </header>

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -111,6 +111,19 @@
   color: #8a8a8a;
 }
 
+.store-layout__category-menu {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.store-layout__category-menu app-category-dropdown {
+  position: absolute;
+  z-index: 1050;
+  top: 100%;
+  left: 0;
+}
+
 @keyframes store-header-logo-skeleton {
   from {
     background-position: 200% 0;

src/app/core/layout/store-layout/store-header/store-header.component.ts

@@ -7,6 +7,8 @@ import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
 import { Menu } from '../../../services/tenant.interface';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { Category } from '../../../services/tenant.interface';
+import { CategoryDropdownComponent } from './category-dropdown/category-dropdown.component';
 
 @Component({
   selector: 'app-store-header',
@@ -17,6 +19,7 @@ import { ReactiveFormsModule, FormControl } from '@angular/forms';
     RouterLink,
     ReactiveFormsModule,
     UserDropdownComponent,
+    CategoryDropdownComponent,
   ],
   templateUrl: './store-header.component.html',
   styleUrl: './store-header.component.scss',
@@ -30,32 +33,37 @@ export class StoreHeaderComponent {
   readonly isAuthenticated = input<boolean>(false);
   readonly accountNavigationMenus = input<readonly Menu[]>([]);
   readonly ticketsMenu = input<Menu | null>(null);
+  readonly categories = input<readonly Category[]>([]);
   readonly cartClick = output<void>();
   readonly ticketsClick = output<void>();
   readonly loginClick = output<void>();
   readonly logoutClick = output<void>();
   readonly searchSubmit = output<string>();
+  readonly categorySelect = output<Category>();
 
   protected readonly isUserDropdownOpen = signal(false);
+  protected readonly isCategoryDropdownOpen = signal(false);
   protected readonly minSearchLength = 3;
   protected readonly showSearchError = signal(false);
   protected readonly searchControl = new FormControl('', { nonNullable: true });
 
   @HostListener('document:click', ['$event'])
   protected onDocumentClick(event: MouseEvent): void {
-    if (!this.isUserDropdownOpen()) {
+    if (!this.isUserDropdownOpen() && !this.isCategoryDropdownOpen()) {
       return;
     }
 
     const target = event.target;
     if (target instanceof Node && !this.elementRef.nativeElement.contains(target)) {
       this.isUserDropdownOpen.set(false);
+      this.isCategoryDropdownOpen.set(false);
     }
   }
 
   @HostListener('document:keydown.escape')
   protected onEscapeKey(): void {
     this.isUserDropdownOpen.set(false);
+    this.isCategoryDropdownOpen.set(false);
   }
 
   protected toggleUserDropdown(): void {
@@ -94,4 +102,13 @@ export class StoreHeaderComponent {
   protected clearSearchError(): void {
     this.showSearchError.set(false);
   }
+
+  protected toggleCategoryDropdown(): void {
+    this.isCategoryDropdownOpen.update((isOpen) => !isOpen);
+  }
+
+  protected onCategorySelect(category: Category): void {
+    this.isCategoryDropdownOpen.set(false);
+    this.categorySelect.emit(category);
+  }
 }

src/app/core/layout/store-layout/store-layout.component.html

@@ -6,11 +6,13 @@
     [isAuthenticated]="isAuthenticated()"
     [accountNavigationMenus]="accountNavigationMenus()"
     [ticketsMenu]="ticketsMenu() ?? null"
+    [categories]="tenant()?.categories ?? []"
     (cartClick)="isCartOpen.set(!isCartOpen())"
     (ticketsClick)="onTicketsClick()"
     (loginClick)="onLoginClick()"
     (logoutClick)="onLogoutClick()"
     (searchSubmit)="onSearch($event)"
+    (categorySelect)="onCategorySelect($event)"
   />
 
   @if (isCartOpen()) {

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -30,6 +30,7 @@ const tenant: Tenant = {
   footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png',
+  categories: [],
   menues: [
     {
       id: 4,

src/app/core/layout/store-layout/store-layout.component.ts

@@ -11,6 +11,7 @@ import { AuthService } from '../../services/auth/auth.service';
 import { findMenu } from '../../services/menu.utils';
 import { CheckoutService } from '../../services/checkout.service';
 import { ToastService } from '../../services/toast.service';
+import { Category } from '../../services/tenant.interface';
 
 @Component({
   selector: 'app-store-layout',
@@ -125,6 +126,12 @@ export class StoreLayoutComponent implements OnInit {
     });
   }
 
+  protected onCategorySelect(category: Category): void {
+    void this.router.navigate(['/categoria', category.id], {
+      queryParams: { page: 1 },
+    });
+  }
+
   protected onTicketsClick(): void {
     const route = this.ticketsMenu()?.route;
 

src/app/core/services/catalog/catalog.interface.ts

@@ -88,7 +88,8 @@ export interface CatalogFeaturedItem {
 }
 
 export type CatalogFeaturedItems =
-  ApiPaginatedResponse<CatalogFeaturedItem[]> | CatalogFeaturedItem[];
+  | ApiPaginatedResponse<CatalogFeaturedItem[]>
+  | CatalogFeaturedItem[];
 
 export interface CatalogFeaturedGroup {
   id: number;
@@ -98,3 +99,15 @@ export interface CatalogFeaturedGroup {
   group_order: number;
   items: CatalogFeaturedItems;
 }
+
+export interface CatalogCategory {
+  id: number;
+  nombre: string;
+  categoria_id: number | null;
+}
+
+export interface CategoryItemsResponse extends ApiPaginatedResponse<CatalogFeaturedItem[]> {
+  category: CatalogCategory;
+  layout: CatalogProductLayout;
+  group_layout: CatalogGroupLayout;
+}

src/app/core/services/catalog/catalog.service.ts

@@ -11,6 +11,7 @@ import {
   CatalogFeaturedItem,
   CatalogFeaturedItems,
   CatalogItemDetail,
+  CategoryItemsResponse,
   Product,
 } from './catalog.interface';
 
@@ -50,6 +51,15 @@ export class CatalogService {
     );
   }
 
+  getCategoryItems(
+    categoryId: number,
+    params?: ApiPaginationQueryParams,
+  ): Observable<CategoryItemsResponse> {
+    return this.http.get<CategoryItemsResponse>(`${this.tenantApiUrl}/categories/${categoryId}`, {
+      params: this.buildHttpParams(params),
+    });
+  }
+
   getFeaturedGroupItems(
     featuredGroupId: number,
     params?: ApiPaginationQueryParams,

src/app/core/services/tenant.interface.ts

@@ -41,6 +41,12 @@ export interface SocialMedia {
   url: string;
 }
 
+export interface Category {
+  id: number;
+  nombre: string;
+  subcategories: Category[];
+}
+
 export interface Tenant {
   id: number;
   codigo: string;
@@ -64,6 +70,7 @@ export interface Tenant {
   main_carousel_images?: string[];
   social_media?: SocialMedia[];
   menues?: Menu[];
+  categories: Category[];
 }
 
 export type TenantBootstrapResponse = ApiResponse<Tenant>;

src/app/core/services/tenant.service.spec.ts

@@ -20,7 +20,20 @@ const tenant: Tenant = {
   header_bg_color: '#313131',
   footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
-  footer_logo: 'https://example.com/footer.png'
+  footer_logo: 'https://example.com/footer.png',
+  categories: [
+    {
+      id: 1,
+      nombre: 'Remeras',
+      subcategories: [
+        {
+          id: 2,
+          nombre: 'Manga corta',
+          subcategories: []
+        }
+      ]
+    }
+  ]
 };
 
 const tenantResponse: TenantBootstrapResponse = {