Projekt - část 6

V tomto cvičení si zopakujeme práci s polem a vytvoříme vlastní funkci pro vypisování menu na stránce.

1. Do souboru config.php si zkopíruj následující pole obsahující položky menu.

$polozkyMenu = [
  ['nazev' => 'Domů', 'href' => '#domu'],
  ['nazev' => 'Blog', 'href' => '#blog'],
  ['nazev' => 'Kontakt', 'href' => '#contact'],
];

2. V adresáři s projektem vytvoř nový soubor funkce.php

3. Prohlídni si v souboru layout/navigation.php, jak jsou vypsané položky menu. Zajímají nás pouze tři elementy <li> obsahující Domů, Blog a Kontakt

4. V souboru funkce.php vytvoř funkci s názvem vypisMenu, která jako parametr přijme pole položek menu (vytvořené v prvním kroku tohoto úkolu) a vrátí textový řetězec, který bude obsahovat HTML pro výpis všech položek menu.

5. V souboru layout/navigation.php smaž tři elementy <li> obsahující položky menu

5. Na místě původních položek použij funkci vypisMenu, které předáš jako parametr položky menu uložené v proměnné $polozkyMenu

6. Zkontroluj, že stránka funguje a můžeš se podívat i na vzorové řešení.

Řešení:

//funkce.php
<?php

function vypisMenu(array $polozkyMenu): string
{
  $menu = '';
  foreach ($polozkyMenu as $polozka) {
    $menu .= '<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="' . $polozka['href'] . '">' . $polozka['nazev'] . '</a></li>';
  }

  return $menu;
}

//layout/navigation.php
<!-- Navigation-->
<div id="progress-bar" class="progress-bar"></div>
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
  <div class="container px-4 px-lg-5">
    <a class="navbar-brand" href="index.html">Můj blog</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ms-auto py-4 py-lg-0">
        <?php echo vypisMenu($polozkyMenu); ?>
        <li class="nav-item dropdown">
          <a class="nav-link px-lg-3 py-3 py-lg-4 dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Čeština
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Čeština</a></li>
            <li><a class="dropdown-item" href="#">Angličtina</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>