web/static/portfolio/css/nav.css

/* -------------- NAV --------------- */

.nav-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: fit-content;
  background-color: transparent;
  height: 5.5rem;
  padding: 1rem;
  z-index: 99;
}

nav {
  background-color: #36363674;
  border-radius: 50rem;
  box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
  color: rgba(0, 0, 0, 0.8);
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding: 0.5rem;
  margin: auto;
}

.nav-close {
  animation: navClose 0.2s ease-in;
}

@keyframes navClose {
  from {
    width: 100%;
  }
  to {
    width: 3.55rem;
  }
}

.nav-open {
  animation: navOpen 0.2s ease-in;
}

@keyframes navOpen {
  from {
    width: 3.55rem;
  }
  to {
    width: 100%;
  }
}

@keyframes navClosePC {
  from {
    width: 50%;
  }
  to {
    width: 3.55rem;
  }
}

@keyframes navOpenPC {
  from {
    width: 3.55rem;
  }
  to {
    width: 50%;
  }
}

.nav-logo {
  border-radius: 50%;
  background-color: #00000056;
  transition: 0.3s;
}

#nav-container {
  display: flex;
  justify-content: right;
  width: 100%;
  overflow: hidden;
}

nav ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  display: flex;
  height: 90%;
  justify-items: center;
  margin-right: 0.1rem;
  margin-left: 0.3rem;
  transition: 0.3s;
}

nav li a {
  display: flex;
  border-radius: 100rem;
  width: 3rem;
  color: white;
  text-align: center;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: none;
  transition: 0.2s;
}

nav li a img {
  filter: invert(96%) sepia(100%) saturate(15%) hue-rotate(126deg)
    brightness(108%) contrast(100%);
}

nav li a:active {
  background: #00000073;
}

li a:hover {
  background: #00000028;
  transition: 0.3s;
}

.nav-logo:hover {
  filter: invert(100%);
  transition: 0.3s;
}

.hide {
  width: 3.55rem;
}

.hide #nav-container {
  display: none;
}

.menuAlt {
  background: #9a9a9a2f;
  transition: 0.3s;
}

@media only screen and (min-width: 750px) {
  .nav-container {
    top: 0;
  }

  .nav-close {
    animation: navClosePC 0.2s ease-in;
  }

  .nav-open {
    animation: navOpenPC 0.2s ease-in;
  }
  nav {
    width: 50%;
  }
}