<!-- Navbar -->
<nav class="navbar navbar-expand-sm fixed-top navbar-dark" id="navHirakana">
  <div class="container">
    <a class="navbar-brand" href="/">
      <img src="../../img/icon.png" class="img-logo" alt="Logo">
      Hirakana
    </a>
    <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMenu"
      aria-controls="collapseMenu" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fa-solid fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="collapseMenu">
      <ul class="navbar-nav me-auto mt-2 mt-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="/">Home </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="lessonDropdown" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Kana Lesson</a>
          <div class="dropdown-menu" aria-labelledby="lessonDropdown">
            <a class="dropdown-item" href="/learn/hiragana">Hiragana</a>
            <a class="dropdown-item" href="/learn/katakana">Katakana</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="quizDropdown" data-bs-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Kana Quiz</a>
          <div class="dropdown-menu" aria-labelledby="quizDropdown">
            <a class="dropdown-item" href="/quiz/hiragana">Hiragana</a>
            <a class="dropdown-item" href="/quiz/katakana">Katakana</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#reviews">Review</a>
        </li>
      </ul>
      <div class="d-flex my-2 mt-lg-0 text-white">
        <ul class="navbar-nav me-auto mt-2 mt-lg-0">
          <li class="nav-item">
            <button type="button" class="btn btn-outline-light">Login</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>