Aside

Aside

L'aside viene mostrata in due versioni diverse, una per desktop ed una per mobile.

Mentre per la parte desktop l'aside è in position: sticky nella colonna sinistra, l'aside per mobile si posiziona come un accordion in position: sticky sopra il corpo dell'articolo, e rimane fissa in alto quando scrolliamo.

Nonostante la doppia implementazione, esiste un solo partial per questo componente, dove differenziamo mobile da desktop.

Questo componente viene inserito in diversi contesti, per esempio nell'indice delle categorie come negli articoli. Questo rende necessario che nel partial ci sia un po' di logica per gestire le diverse pagine dove inseriremo questo componente.

Il partial si chiama _sticky-anchor.html.slim e si presenta così:

Variabili

La prima cosa che troviamo in testa al file sono le variabili:

ruby:
  page ||= nil
  categories ||= nil
  mobile ||= nil
  title ||= t("sections_nav_title")
  any_title_present = false
  if page.respond_to?(:content_blocks)
    page.content_blocks.each do |block|
      if block.respond_to?(:text_title) && block.text_title.present?
        any_title_present = true
      end
    end
  end

Descriviamo queste variabili:

• page e categories: Servono a capire se siamo su una pagina tipo Articolo o sulle categorie (obbligatoria).

• mobile: Variabile che definisce se vogliamo la versione mobile o desktop (default: false).

• title: Un titolo custom (default: stringa I18n).

• any_title_present: Definisce se, per le pagine, sia presente almeno un titolo, così da non mostrare l'aside nel caso non ci fossero ancore.

Il loop dopo controlla tra i titoli dei blocchi e, in caso trovasse almeno un titolo, aggiorna la variabile any_title_present.

Contenuto condiviso

Essendo fondamentalmente due componenti diversi, lo slim cambierà sostanzialmente, ma la parte di contenuti è condivisa dalla variabile content, che usa il metodo capture per immagazzinare dello slim che verrà usato in entrambi i componenti.

- content = capture
  - if categories.present?
    - categories.each do |cat|
      li.nav-item
        = link_to cat.name,
          "##{cat.slug}",
          class: "nav-link pr-4",
          tabindex: "-1"

  - else
    - page.content_blocks.each do |block|
      - if block.respond_to?(:text_title) && block.text_title.present?
        li.nav-item
          = link_to block.text_title,
            "##{anchor_id(block.text_title)}",
            class: "nav-link pr-4",
            tabindex: "-1"

Struttura dello slim

Per quanto riguarda la parte mobile, abbiamo utilizzato il blocco accordion (https://italia.github.io/bootstrap-italia/docs/componenti/collapse), mentre per la parte desktop è semplicemente un blocco nav con titolo e lista.

  - if mobile
    nav.sticky-top.menu-wrapper.col-12.d-lg-none.px-0.bg-white [
      aria-label="indice di pagina mobile" aria-hidden="true"]
      .it-list-wrapper.menu-link-list
        .collapse-div role="tablist" id="accordionDiv-aside"
          .collapse-header id='headingA-aside'
            .p-0.pt-2 [aria-controls="accordion-aside"
                      aria-expanded="false"
                      data-target="#accordion-aside"
                      data-toggle="collapse"
                      role="button"]
              .pt-1.pb-2.px-3
                p.h3.text-uppercase.mid-caption.font-weight-semibold
                  = title

              .col-12.neutral-1-bg-a1.pr-0.pl-0.relative
                ._progress-indicator.progress-indicator.primary-bg-b1
          .collapse [aria-labelledby="headingA-aside"
                    id="accordion-aside"
                    data-parent="#accordionDiv-aside"
                    role="tabpanel"]
            .collapse-body.p-0
              ul.it-list.small.py-3._top-menu
                = content
  - else
    nav.sticky-top.menu-wrapper.pb-5 [
      aria-label="indice di pagina" aria-hidden="false"]
      .it-list-wrapper.menu-link-list
        p.h3.pt-3.pb-2.text-uppercase.mid-caption.font-weight-semibold
          = title

        .col-12.neutral-1-bg-a1.pr-0.pl-0.relative
          ._progress-indicator.progress-indicator.primary-bg-b1

        ul.it-list.small.pt-3._top-menu
          = content