Forked from - New snippet 245

HTML

xxxxxxxxxx
 
<!--Main Navigation-->
<header>
  <!-- Sidenav-->
<nav
  id="sidenav-4"
  class="sidenav"
  data-mdb-mode="side"
  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>
       <button id="slim-toggler" class="btn shadow-0 p-0 me-3 d-none d-xxl-block">
          <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-->

CSS

xxxxxxxxxx
 
@media (min-width: 1400px) {
  main,
  header,
  #main-navbar,
  #slim-toggler {
    padding-left: 240px;
  }
}

xxxxxxxxxx
 
const sidenav = document.getElementById("sidenav-4");
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);
​
let innerWidth = null;
​
const setMode = (e) => {
  // Check necessary for Android devices
  if (window.innerWidth === innerWidth) {
    return;
  }
​
  innerWidth = window.innerWidth;
​
  if (window.innerWidth < 1400) {
    sidenavInstance.update({slimCollapsed: false, slim: true})
    sidenavInstance.changeMode("over");
    sidenavInstance.hide();
  } else {
     sidenavInstance.update({slim:true, slimCollapsed: true})
    sidenavInstance.changeMode("side");
    sidenavInstance.show();
  }
};
​
setMode();
​
// Event listeners
window.addEventListener("resize", setMode);
​
document.getElementById('slim-toggler').addEventListener('click', () => {
  sidenavInstance.toggleSlim();
})

Console errors: 0