<!-- Navigation -->

<header>

  <style>

    body {

      background-color: hsl(0, 0%, 96%);

    }

    @media (min-width: 1400px) {

      main,

      header,

      #main-navbar {

        padding-left: 240px;

      }

    }

  </style>

  <!-- Sidenav -->

  <nav id="sidenav-1" class="sidenav" data-mdb-hidden="false" data-mdb-accordion="true">

    <a class="ripple d-flex justify-content-center py-4" href="#!" data-mdb-ripple-color="primary">

      <img id="MDB-logo" src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"

        alt="MDB Logo" draggable="false" />

    </a>

​

    <ul class="sidenav-menu">

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-chart-area fa-fw me-3"></i><span>Webiste traffic</span></a>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link"><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a>

        <ul class="sidenav-collapse">

          <li class="sidenav-item">

            <a class="sidenav-link">Profile</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link">Account</a>

             <ul class="sidenav-collapse">

                <li class="sidenav-item">

                  <a class="sidenav-link">sub Account 1</a>

                </li>

                <li class="sidenav-item">

                  <a class="sidenav-link">sub Account 2</a>

                </li>

        </ul>

          </li>

        </ul>

      </li>

​

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-calendar fa-fw me-3"></i><span>Calendar</span></a>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-users fa-fw me-3"></i><span>Users</span></a>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a>

      </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-1" class="btn shadow-0 p-0 me-3 d-block d-xxl-none"

        aria-controls="#sidenav-1" 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 elements -->

      <div class="d-flex align-items-center right-items">

        <!-- Notifications -->

        <a

          class="text-reset me-3 dropdown-toggle hidden-arrow"

          href="#"

          id="navbarDropdownMenuLink"

          role="button"

          data-mdb-toggle="dropdown"

          aria-expanded="false"

        >

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

        </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>

​

        <!-- Avatar -->

        <a

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

          href="#"

          id="navbarDropdownMenuLink"

          role="button"

          data-mdb-toggle="dropdown"

          aria-expanded="false"

        >

          <img

            src="https://mdbootstrap.com/img/new/avatars/2.jpg"

            class="rounded-circle"

            height="25"

            alt=""

            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>

      </div>

      <!-- Right elements -->

    </div>

    <!-- Container wrapper -->

  </nav>

  <!-- Navbar -->

</header>

<!-- Navigation -->

​

<!-- Content -->

<main>

​

  <div class="container-fluid px-5 my-5 py-5">

​

    <h2 class="mb-4 pb-3">Dashboard</h2>

​

    <div class="rounded-6" style="height: 600px; border: 3px dashed #ddd;"></div>

​

  </div>

​

</main>

<!-- Content -->