website/src/components/assets/Navbar.scss

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

$white: rgb(236, 236, 236);
$gray: rgb(197, 197, 197);
$black: #000;
$mobile: 768px;
$tablet: 1024px;

@mixin mobile {
  @media (max-width: $mobile) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: $mobile) and (max-width: $tablet) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: $tablet) {
    @content;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  font-family: "Poppins", sans-serif;
}

.nav-logo {
  margin-top: 5px;
  margin-left: -40px;
  float: left;
  width: 276px;
  height: 115px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 750px;
  z-index: 9999;

  @include tablet {
    width: 40%;
  }

  li {
    list-style: none;
    a {
      color: $gray;
      text-decoration: none;
    }
  }
}

.active-link {
  color: $black !important;
}

.burger {
  display: none;

  div {
    width: 25px;
    height: 3px;
    background-color: $white;
    margin: 5px;
    transition: all 0.3s ease;
  }
}

@media (max-width: 1200px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0;
    height: 92vh;
    top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $black;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;

    li {
      opacity: 0;
    }
  }

  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle {
  .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .line2 {
    opacity: 0;
  }
  .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
}