<nav class="navbar bg-dark text-white">
      <div class="container">
        <div class="navbar-brand fw-bold ps-3">
          <a href="#">LOGO</a>
        </div>
        <ul class="nav-links d-flex m-0">
          <i class="hide-toggle gg-close"></i>
          <il class="nav-link"><a href="http://">Home</a></il>
          <il class="nav-link"><a href="http://">Contact us</a></il>
          <il class="nav-link"><a href="http://">About us</a></il>
          <il class="nav-link"><a href="http://">Tours</a></il>
        </ul>
        <div class="menu-toggle">
          <i class="d-sm-block d-sm-none gg-menu-right"></i>
        </div>
      </div>
    </nav>

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/css.gg/icons/all.css");

:root {
  --bg-dark: rgb(24, 24, 24);
  --bg-light: #e4e4e4;
}

*,
*::after,
*::before {
  font-family: "Poppins", sans-serif;
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}
body {
  overflow-x: hidden;
  background-image: linear-gradient(
    to right top,
    #d16ba5,
    #c777b9,
    #ba83ca,
    #aa8fd8,
    #9a9ae1,
    #8aa7ec,
    #79b3f4,
    #69bff8,
    #52cffe,
    #41dfff,
    #46eefa,
    #5ffbf1
  );
  min-height: 100vh;
}
.nav-link,
.nav-link:hover {
  color: inherit;
}

.navbar {
  & .menu-toggle {
    display: none;
  }
}
.nav-links {
  & .hide-toggle {
    display: none;
  }
}
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  .navbar {
    position: relative;
    & .menu-toggle {
      display: block;
      cursor: pointer;
      padding: 1rem;
    }
  }
  .nav-links {
    position: absolute;
    top: 0px;
    left: 40%;
    right: 0;
    height: 100vh;
    flex-direction: column;
    background-color: rgba(19, 19, 19, 0.979);
    box-shadow: -35px 0px 20px -25px rgba(0, 0, 0, 0.548);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: space-between;
    padding: 0rem;
    z-index: 999;
    transition: all 200ms ease;

    &.show {
      transform: translateX(0%);
      visibility: visible;
      opacity: 1;
    }
    &.hide {
      transform: translateX(100%);
      visibility: hidden;
      opacity: 0;
    }
    & .hide-toggle {
      --ggs: 1.5;
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      font-size: 50px;
    }
    & .nav-link {
      width: 100%;
      border-radius: 10px;
      padding: 1rem 2rem;
      margin-left: 15px;
      margin-bottom: 20px;
      &:hover {
        color: rgb(0, 0, 0);
        background: whitesmoke;
      }
    }
  }
}

const hideToggle = document.querySelector(".hide-toggle");
const menuToggle = document.querySelector(".menu-toggle");
const navLinks = document.querySelector(".nav-links");
hideToggle.addEventListener("click", () => {
  navLinks.classList.toggle("hide");
});
menuToggle.addEventListener("click", () => {
  if (navLinks.classList.contains("hide")) {
    navLinks.classList.remove("hide");
    navLinks.classList.toggle("show");
  }
});