Category Anchor

Descripción

UiCategoryAnchor es un componente de navegación por categorías que permite a los usuarios desplazarse suavemente hacia secciones específicas de la página. Cada botón representa una categoría y, al hacer clic, el componente realiza un scroll hasta el elemento correspondiente identificado por un id generado automáticamente con la función slugify. Además, actualiza la URL con el hash de la categoría para facilitar la navegación directa.

---

Props

elementList

• Tipo: Array<string | { title: string }>
• Requerido: Sí
• Descripción: Lista de elementos que representan las categorías. Cada elemento puede ser un string o un objeto con la propiedad title.
• Ejemplo:

elementList: ["Matemáticas", { title: "Física" }, "Química"];

---

Funcionalidad

scrollToCategory(category: string)

• Parámetros: category → el nombre de la categoría a la que se quiere desplazar.

• Descripción:

  1. Convierte el nombre de la categoría a un id válido usando slugify.
  2. Busca el elemento en el DOM con ese id.
  3. Si existe, hace scroll suave hacia el inicio de ese elemento.
  4. Actualiza la URL con el hash correspondiente (#categoria).

Computed Properties

• categories → Set<string> Extrae los nombres únicos de las categorías a partir de elementList.

• arrayCategories → string[] Convierte el Set de categorías en un array para iterar en el template.

---

Template

• Renderiza un nav con botones (button) para cada categoría.

• Cada botón:

  • Tiene un evento @click que llama a scrollToCategory.
  • Incluye un title accesible para lectores de pantalla.
  • Se genera dinámicamente a partir de arrayCategories.

---

Estilos

• El contenedor .anchor-categories usa un layout flexible (flex) y se adapta a dispositivos responsivos.

• Los botones .anchor-categories__link tienen:

  • Borde y color principal definidos por variables CSS.
  • Efecto de hover con escalado.
  • Bordes redondeados y padding cómodo para interacción táctil.

---

Uso

<UiCategoryAnchor
  v-if="inspiriaCourseData?.courseList"
  :element-list="inspiriaCourseData?.courseList"
/>

Integración con secciones

Para que el scroll funcione correctamente, cada sección destino debe tener un id generado con slugify del nombre de la categoría:

<UiSectionFeaturedCards
  v-for="courses in inspiriaCourseData?.courseList"
  :id="slugify(courses.title)"
  :key="courses.id"
  :title="courses.title"
  :title-strong="visibleVertical.name"
  :items="courses.products"
  :show-view-more="true"
/>

---

Accesibilidad

• Se utiliza aria-label en el contenedor nav para describir la navegación por categorías.
• Cada botón incluye title para mejorar la accesibilidad y claridad de navegación.