nouveau-theatre-de-besancon/site/snippets/nav.php

<header class="main-header">
  <nav class="main-nav" aria-label="main-menu">
    <a href="/" title="Aller à l'accueil">
      <?php if ($page->isHomePage() || $page->template() == "sectioned"): ?>
        <h1 class="logo">
          <span>
            Nouveau
          </span>
          <span>
            Théâtre
          </span>
          <span>
            Besançon
          </span>
        </h1>    
      <?php else: ?>
        <h2 class="logo">
          <span>
            Nouveau
          </span>
          <span>
            Théâtre
          </span>
          <span>
            Besançon
          </span>
        </h2>
      <?php endif ?>
      
    </a>
    <div class="main-nav__right">
      <ul class="main-nav__featured-pages">
        <?php foreach($site->featuredPages()->toPages() as $navItem): ?>  
          <li>
            <a <?= e($page->url() == $navItem->url(), 'aria-current="page" ') ?>href="<?= $navItem->url() ?>">
              <?= $navItem->title() ?>
            </a>
          </li>
        <?php endforeach ?>
      </ul>
      <?php snippet('ticket', ['link' => option('ticketingUrl')]) ?>
      <a href="/recherche" class="main-nav__search" title="chercher">
        <?= svg('/assets/images/icons/search.svg') ?>
        <span class="sr-only">Rechercher une page</span>
      </a>
      <button class="burger-btn" title="Ouvrir le menu" aria-controls="expanded-nav">
        <span class="sr-only">Ouvrir le menu</span>
        <span class="burger-btn__line"></span>
      </button>
    </div>
  </nav>
</header>

<!--========== EXPANDED NAV ==========-->
<nav id="expanded-nav">
  <a class="expanded-nav__logo-link" href="/" title="Aller à l'accueil" tabindex="-1">
    <h1 class="logo">
      <span>
        N<span class="logo__detail">ouveau</span>
      </span>
      <span>
        T<span class="logo__detail">héâtre</span>
      </span>
      <span>
        B<span class="logo__detail">esançon</span>
      </span>
    </h1>
  </a>
  <ul class="expanded-nav__columns">
    <?php foreach($site->children()->listed() as $category): ?>
        <li x-data="{
          open: false
        }">
          <h4 class="expanded-nav__category">
            <a <?= e($page->url() == $navItem->url(), 'aria-current="page" ') ?>href="<?= $category->url() ?>" tabindex="-1"><?= $category->title() ?></a>
            <button class="toggle" :class="open ? 'open': ''" @click="open = !open">→</button>
          </h4>
          
          <ul class="expanded-nav__subcategories" :class="open ? 'open': ''">
            <?php foreach($category->children() as $subcategory): ?>
                <?php if ($subcategory->isIndexed() == 'true'): ?>
                  <li>
                    <a class="expanded-nav__subcategory" href="<?= $category->url() . '/#' . $subcategory->slug() ?>" tabindex="-1"><?= $subcategory->title() ?></a>
                  </li>
                <?php endif ?>
            <?php endforeach ?>
            <?php if ($category->template() == 'program'): ?>
              <li><a class="expanded-nav__subcategory" href="<?= $category->url() . '/?tab=Calendrier' ?>" tabindex="-1">Calendrier</a></li>
              <?php foreach($category->categories()->split() as $subcategory): ?>
                <li><a class="expanded-nav__subcategory" href="<?= $category->url() . '/?tab=Calendrier+—+' . urlencode($subcategory) ?>" tabindex="-1"><?= $subcategory ?></a></li>
              <?php endforeach ?>
            <?php endif ?>
          </ul>
        </li>
    <?php endforeach ?>
    <li class="expanded-nav__links">
      <div class="expanded-nav__ticketing">
        <a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie" tabindex="-1"><?php snippet('ticket') ?> Billetterie</a>
      </div>
      <div class="expanded-nav__socials">
        <strong>Suivez-nous</strong>
        <ul class="social-icons">
          <li>
            <a href="<?= $site->instagram() ?>" class="invert" target="_blank" title="Voir la page Instagram du NTB" tabindex="-1"><?= svg('assets/images/icons/instagram.svg') ?></a>
          </li>
          <li>
            <a href="<?= $site->facebook() ?>" class="invert" target="_blank" title="Voir la page Facebook du NTB" tabindex="-1"><?= svg('assets/images/icons/facebook.svg') ?></a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
  <button class="close-btn" title="Fermer le menu" tabindex="-1">
    <span class="close-btn__line"></span>
  </button>
</nav>