<!-- Sidenav-->

<nav

     id="sidenav-4"

     class="sidenav bg-glass opacity-100"

     data-mdb-color="light"

     data-mdb-mode="side"

     data-mdb-slim="true"

     data-mdb-slim-collapsed="true"

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

     >

  <div class="sidenav-item mb-2">

    <a  

       id="slim-toggler"

       class="sidenav-link d-flex justify-content-center border-bottom"

       >

      <i class="fas fa-chevron-circle-right"></i>

    </a>

  </div>

​

  <ul class="sidenav-menu">

    <li class="sidenav-item">

      <a class="sidenav-link">

        <i class="fas fa-chart-area fa-fw me-3"></i

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

        >

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link">

        <i class="fas fa-chart-line fa-fw me-3"></i

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

        >

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link">

        <i class="fas fa-chart-pie fa-fw me-3"></i

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

        >

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link">

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

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

        >

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link">

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

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

        >

    </li>

  </ul>

</nav>

<!-- Sidenav-->

​

<!-- Main content -->

<div class="container py-5">

  <!-- Section: Summary -->

  <section class="mb-5">

    <div class="row gx-xl-5">

      <div class="col-xl-3 col-md-6 mb-4 mb-xl-0">

        <!-- Card -->

        <a

           class="

                  d-flex

                  align-items-center

                  p-4

                  bg-glass

                  shadow-4-strong

                  rounded-6

                  text-reset

                  ripple

                  "

           href="#"

           data-ripple-color="hsl(0, 0%, 75%)"

           >

          <div class="p-3 bg-theme rounded-4">

            <i class="fas fa-users fa-lg text-white fa-fw"></i>

          </div>

​

          <div class="ms-4">

            <p class="text-muted mb-2">Users</p>

            <p class="mb-0">

              <span class="h5 me-2">14 567 </span>

              <small class="text-success text-sm"

                     ><i class="fas fa-arrow-up fa-sm me-1"></i>13,48%</small

                >

            </p>

          </div>

        </a>

        <!-- Card -->

      </div>

​

      <div class="col-xl-3 col-md-6 mb-4 mb-xl-0">

        <!-- Card -->

        <a

           class="

                  d-flex

                  align-items-center

                  p-4

                  bg-glass

                  shadow-4-strong

                  rounded-6

                  text-reset

                  ripple

                  "

           href="#"

           data-ripple-color="hsl(0, 0%, 75%)"

           >

          <div class="p-3 bg-theme rounded-4">

            <i class="fas fa-file-alt fa-lg text-white fa-fw"></i>

          </div>

​

          <div class="ms-4">

            <p class="text-muted mb-2">Page views</p>

            <p class="mb-0">

              <span class="h5 me-2">51 354</span>

              <small class="text-success text-sm"

                     ><i class="fas fa-arrow-up fa-sm me-1"></i>23,58%</small

                >

            </p>

          </div>

        </a>

        <!-- Card -->

      </div>

​

      <div class="col-xl-3 col-md-6 mb-4 mb-xl-0">

        <!-- Card -->

        <a

           class="

                  d-flex

                  align-items-center

                  p-4

                  bg-glass

                  shadow-4-strong

                  rounded-6

                  text-reset

                  ripple

                  "

           href="#"

           data-ripple-color="hsl(0, 0%, 75%)"

           >

          <div class="p-3 bg-theme rounded-4">

            <i class="fas fa-clock fa-lg text-white fa-fw"></i>

          </div>

​

          <div class="ms-4">

            <p class="text-muted mb-2">Average time</p>

            <p class="mb-0">

              <span class="h5 me-2">00:04:20</span>

              <small class="text-danger text-sm"

                     ><i class="fas fa-arrow-down fa-sm me-1"></i>23,58%</small

                >

            </p>

          </div>

        </a>

        <!-- Card -->

      </div>

​

      <div class="col-xl-3 col-md-6 mb-4 mb-xl-0">

        <!-- Card -->

        <a

           class="

                  d-flex

                  align-items-center

                  p-4

                  bg-glass

                  shadow-4-strong

                  rounded-6

                  text-reset

                  ripple

                  "

           href="#"

           data-ripple-color="hsl(0, 0%, 75%)"

           >

          <div class="p-3 bg-theme rounded-4">

            <i class="fas fa-sign-out-alt fa-lg text-white fa-fw"></i>

          </div>

​

          <div class="ms-4">

            <p class="text-muted mb-2">Bounce rate</p>

            <p class="mb-0">

              <span class="h5 me-2">32.35% </span>

              <small class="text-success text-sm"

                     ><i class="fas fa-arrow-down fa-sm me-1"></i>23,58%</small

                >

            </p>

          </div>

        </a>

        <!-- Card -->

      </div>

    </div>

  </section>

  <!-- Section: Summary -->

​

  <!-- Section: Table -->

  <section class="mb-5">

    <div class="table-responsive bg-glass shadow-4-strong rounded-6">

      <table

             class="

                    table table-borderless table-hover

                    align-middle

                    mb-0

                    text-white

                    "

             >

        <thead class="">

          <tr>

            <th>Name</th>

            <th>Title</th>

            <th>Status</th>

            <th>Position</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody class="">

          <tr class="text-white">

            <td>

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

                <img

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

                     alt=""

                     style="width: 45px; height: 45px"

                     class="rounded-circle"

                     />

                <div class="ms-3">

                  <p class="fw-bold mb-1">John Doe</p>

                  <p class="text-muted mb-0">john.doe@gmail.com</p>

                </div>

              </div>

            </td>

            <td>

              <p class="fw-bold mb-1">Software engineer</p>

              <p class="text-muted mb-0">IT department</p>

            </td>

            <td>

              <span class="badge badge-success rounded-pill">Active</span>

            </td>

            <td>Senior</td>

            <td>

              <button

                      type="button"

                      class="btn btn-outline-white btn-sm btn-rounded"

                      >

                Edit

              </button>

            </td>

          </tr>

          <tr class="text-white">

            <td>

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

                <img

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

                     class="rounded-circle"

                     alt=""

                     style="width: 45px; height: 45px"

                     />

                <div class="ms-3">

                  <p class="fw-bold mb-1">Alex Ray</p>

                  <p class="text-muted mb-0">alex.ray@gmail.com</p>

                </div>

              </div>

            </td>

            <td>

              <p class="fw-normal mb-1">Consultant</p>

              <p class="text-muted mb-0">Finance</p>

            </td>

            <td>

              <span class="badge badge-primary rounded-pill"

                    >Onboarding</span

                >

            </td>

            <td>Junior</td>

            <td>

              <button

                      type="button"

                      class="btn btn-outline-white btn-rounded btn-sm fw-bold"

                      >

                Edit

              </button>

            </td>

          </tr>

          <tr class="text-white">

            <td>

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

                <img

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

                     class="rounded-circle"

                     alt=""

                     style="width: 45px; height: 45px"

                     />

                <div class="ms-3">

                  <p class="fw-bold mb-1">Kate Hunington</p>

                  <p class="text-muted mb-0">kate.hunington@gmail.com</p>

                </div>

              </div>

            </td>

            <td>

              <p class="fw-normal mb-1">Designer</p>

              <p class="text-muted mb-0">UI/UX</p>

            </td>

            <td>

              <span class="badge badge-warning rounded-pill">Awaiting</span>

            </td>

            <td>Senior</td>

            <td>

              <button

                      type="button"

                      class="btn btn-outline-white btn-rounded btn-sm fw-bold"

                      >

                Edit

              </button>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

  </section>

  <!-- Section: Table -->

​

  <!-- Section: Visualization -->

  <section class="">

    <div class="row gx-lg-5">

      <div class="col-lg-6 col-md-12 mb-4 mb-lg-0">

        <!-- Card -->

        <div class="bg-glass shadow-4-strong rounded-6 h-100">

          <!-- Card header -->

          <div class="p-4 border-bottom">

            <div class="row align-items-center">

              <div class="col-6 mb-4 mb-md-0">

                <p class="text-muted mb-2">Users</p>

                <p class="mb-0">

                  <span class="h5 me-2">14 567 </span>

                  <small class="text-success text-sm"

                         ><i class="fas fa-arrow-up fa-sm me-1"></i>13,48%</small

                    >

                </p>

              </div>

​

              <div class="col-6 mb-4 mb-md-0 text-end">

                <a

                   class="btn btn-outline-white btn-rounded"

                   href="#"

                   role="button"

                   >Details</a

                  >

              </div>

            </div>

          </div>

          <!-- Card header -->

​

          <!-- Card body -->

          <div class="p-4">

            <canvas id="line-chart" height="200px"></canvas>

          </div>

          <!-- Card body -->

        </div>

        <!-- Card -->

      </div>

​

      <div class="col-lg-6 mb-4 mb-lg-0">

        <!-- Card -->

        <div class="bg-glass shadow-4-strong rounded-6">

          <!-- Card header -->

          <div class="p-4 border-bottom">

            <div class="row align-items-center">

              <div class="col-6 mb-4 mb-md-0">

                <p class="text-muted mb-2">Location</p>

                <p class="mb-0">

                  <span class="h5 me-2">Top country: USA </span>

                </p>

              </div>

​

              <div class="col-6 mb-4 mb-md-0 text-end">

                <a

                   class="btn btn-outline-white btn-rounded"

                   href="#"

                   role="button"

                   >Details</a

                  >

              </div>

            </div>

          </div>

          <!-- Card header -->

​

          <!-- Card body -->

          <div class="p-4 pb-0">

            <div class="vector-map" id="my-map"></div>

          </div>

          <!-- Card body -->

        </div>

        <!-- Card -->

      </div>

    </div>

  </section>

  <!-- Section: Visualization -->

</div>

<!-- Main content -->

body {

  background-color: hsl(218, 41%, 15%);

  background-image: radial-gradient(

    650px circle at 0% 0%,   

    hsl(218, 41%, 35%) 15%,

    hsl(218, 41%, 30%) 35%,

    hsl(218, 41%, 20%) 75%,

    hsl(218, 41%, 19%) 80%,

    transparent 100%

  ),

    radial-gradient(

      1250px circle at 100% 100%,

      hsl(218, 41%, 45%) 15%,

      hsl(218, 41%, 30%) 35%,

      hsl(218, 41%, 20%) 75%,

      hsl(218, 41%, 19%) 80%,

      transparent 100%

    );

  height: 100vh;

  padding-left: 70px;

  overflow-x: hidden;

  color: #fff;

}

@media (max-width: 991.98px) {

  body {

    height: 100%;

  }

}

.bg-theme {

  background-color: hsl(218, 41%, 25%);

}

.bg-glass {

  background: hsla(0, 0%, 100%, 0.15);

  backdrop-filter: blur(30px);

}

.text-muted {

  color: hsl(0, 0%, 80%) !important;

}

.text-success {

  color: hsl(144, 100%, 40.9%) !important;

}

.text-danger {

  color: hsl(350, 94.3%, 68.4%) !important;

}

.border-bottom {

  border-bottom: 1px solid hsl(0, 0%, 50%) !important;

}

.badge {

  padding: 5px 10px;

}

<!-- Chart -->

<script type="text/javascript">

  const ctxL = document.getElementById("line-chart").getContext("2d");

const gradientFill = ctxL.createLinearGradient(0, 0, 0, 290);

gradientFill.addColorStop(0, "hsla(218, 71%, 35%, 1)");

gradientFill.addColorStop(1, "hsla(218, 41%, 35%, 0.2)");

​

const dataLine = {

  type: "line",

  data: {

    labels: [

      "Monday",

      "Tuesday",

      "Wednesday",

      "Thursday",

      "Friday",

      "Saturday",

      "Sunday ",

    ],

    datasets: [

      {

        label: "Traffic",

        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],

        backgroundColor: gradientFill,

      },

    ],

  },

};

​

const chartOptions = {

  options: {

    legend: {

      display: false,

    },

    scales: {

      yAxes: [

        {

          ticks: {

            fontColor: "hsl(0, 0%, 80%)",

          },

        },

      ],

      xAxes: [

        {

          ticks: {

            fontColor: "hsl(0, 0%, 80%)",

          },

        },

      ],

    },

  },

};

​

new mdb.Chart(

  document.getElementById("line-chart"),

  dataLine,

  chartOptions

);

</script>

​

<!-- Map -->

<script>

  const map = document.getElementById("my-map");

​

new VectorMap(map, {

  readonly: true,

  stroke: "hsl(0, 0%, 100%)",

  fill: "hsl(219, 87%, 89%)",

  hoverFill: "hsl(219, 87%, 20%)",

  colorMap: [

    { fill: "hsl(218, 71%, 45%)", regions: ["US"] },

    { fill: "hsl(218, 71%, 65%)", regions: ["RU", "AU"] },

    {

      fill: "hsl(218, 71%, 75%)",

      regions: [

        "PL",

        "DE",

        "FR",

        "GB",

        "ES",

        "IT",

        "SE",

        "NO",

        "CZ",

        "NL",

        "BE",

        "CN",

        "IN",

      ],

    },

  ],

});

</script>

​

<!-- Sidenav -->

<script>

  //Initialize it with JS to make it instantly visible

​

  const slimInstance = new mdb.Sidenav(

    document.getElementById("sidenav-4")

  );

slimInstance.show();

​

document.getElementById("slim-toggler").addEventListener("click", () => {

  slimInstance.toggleSlim();

});

</script>