<!--Main Navigation-->

<header>

  <!-- Sidenav-->

<nav

  id="sidenav-4"

  class="sidenav"

  data-mdb-mode="side"

  data-mdb-slim="true"

  data-mdb-slim-collapsed="true"

  data-mdb-content="#slim-content"

>

  <ul class="sidenav-menu">

    <li class="sidenav-item">

      <a class="sidenav-link">

        <i class="far fa-smile me-3"></i

        ><span data-mdb-slim="false">Link 1</span></a

      >

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link"

        ><i class="fas fa-grin me-3"></i

        ><span data-mdb-slim="false">Category 1</span></a

      >

      <ul class="sidenav-collapse">

        <li class="sidenav-item">

          <a class="sidenav-link">Link 2</a>

        </li>

        <li class="sidenav-item">

          <a class="sidenav-link">Link 3</a>

        </li>

      </ul>

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link"

        ><i class="fas fa-grin-wink me-3"></i

        ><span data-mdb-slim="false">Category 2</span></a

      >

      <ul class="sidenav-collapse">

        <li class="sidenav-item">

          <a class="sidenav-link">Link 4</a>

        </li>

        <li class="sidenav-item">

          <a class="sidenav-link">Link 5</a>

        </li>

      </ul>

    </li>

  </ul>

</nav>

<!-- Sidenav-->

​

  <!-- Navbar -->

  <nav

    id="main-navbar"

    class="navbar navbar-expand-lg navbar-light bg-white fixed-top"

  >

    <!-- Container wrapper -->

    <div class="container-fluid">

      <!-- Toggler -->

      <button

        data-mdb-toggle="sidenav"

        data-mdb-target="#sidenav-4"

        class="btn shadow-0 p-0 me-3 d-block d-xxl-none"

        aria-controls="#sidenav-4"

        aria-haspopup="true"

      >

        <i class="fas fa-bars fa-lg"></i>

      </button>

​

      <!-- Search form -->

      <form class="d-none d-md-flex input-group w-auto my-auto">

        <input

          autocomplete="off"

          type="search"

          class="form-control rounded"

          placeholder='Search (ctrl + "/" to focus)'

          style="min-width: 225px"

        />

        <span class="input-group-text border-0"

          ><i class="fas fa-search"></i

        ></span>

      </form>

​

      <!-- Right links -->

      <ul class="navbar-nav ms-auto d-flex flex-row">

        <!-- Notification dropdown -->

        <li class="nav-item dropdown">

          <a

            class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"

            href="#"

            id="navbarDropdownMenuLink"

            role="button"

            data-mdb-toggle="dropdown"

            aria-expanded="false"

          >

            <i class="fas fa-bell"></i>

            <span class="badge rounded-pill badge-notification bg-danger"

              >1</span

            >

          </a>

          <ul

            class="dropdown-menu dropdown-menu-end"

            aria-labelledby="navbarDropdownMenuLink"

          >

            <li><a class="dropdown-item" href="#">Some news</a></li>

            <li><a class="dropdown-item" href="#">Another news</a></li>

            <li>

              <a class="dropdown-item" href="#">Something else here</a>

            </li>

          </ul>

        </li>

​

        <!-- Icon -->

        <li class="nav-item">

          <a class="nav-link me-3 me-lg-0" href="#">

            <i class="fas fa-fill-drip"></i>

          </a>

        </li>

        <!-- Icon -->

        <li class="nav-item me-3 me-lg-0">

          <a class="nav-link" href="#">

            <i class="fab fa-github"></i>

          </a>

        </li>

​

        <!-- Icon dropdown -->

        <li class="nav-item dropdown">

          <a

            class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"

            href="#"

            id="navbarDropdown"

            role="button"

            data-mdb-toggle="dropdown"

            aria-expanded="false"

          >

            <i class="united kingdom flag m-0"></i>

          </a>

          <ul

            class="dropdown-menu dropdown-menu-end"

            aria-labelledby="navbarDropdown"

          >

            <li>

              <a class="dropdown-item" href="#"

                ><i class="united kingdom flag"></i>English

                <i class="fa fa-check text-success ms-2"></i

              ></a>

            </li>

            <li><hr class="dropdown-divider" /></li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="poland flag"></i>Polski</a

              >

            </li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="china flag"></i>中文</a

              >

            </li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="japan flag"></i>日本語</a

              >

            </li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="germany flag"></i>Deutsch</a

              >

            </li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="france flag"></i>Français</a

              >

            </li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="spain flag"></i>Español</a

              >

            </li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="russia flag"></i>Русский</a

              >

            </li>

            <li>

              <a class="dropdown-item" href="#"

                ><i class="portugal flag"></i>Português</a

              >

            </li>

          </ul>

        </li>

​

        <!-- Avatar -->

        <li class="nav-item dropdown">

          <a

            class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"

            href="#"

            id="navbarDropdownMenuLink"

            role="button"

            data-mdb-toggle="dropdown"

            aria-expanded="false"

          >

            <img

              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp"

              class="rounded-circle"

              height="22"

              alt="Avatar"

              loading="lazy"

            />

          </a>

          <ul

            class="dropdown-menu dropdown-menu-end"

            aria-labelledby="navbarDropdownMenuLink"

          >

            <li><a class="dropdown-item" href="#">My profile</a></li>

            <li><a class="dropdown-item" href="#">Settings</a></li>

            <li><a class="dropdown-item" href="#">Logout</a></li>

          </ul>

        </li>

      </ul>

    </div>

    <!-- Container wrapper -->

  </nav>

  <!-- Navbar -->

</header>

<!--Main Navigation-->

​

<!--Main layout-->

<main style="margin-top: 58px">

  <div class="container">

​

  </div>

</main>

<!--Main layout-->

​

<!--Footer-->

<footer></footer>

<!--Footer-->