Proyectos de Subversion LeadersLinked - Antes de SPA

@use "../../settings/breakpoints.scss";

.navLinksContainer {
  align-items: center;
  display: flex;
  max-width: 80%;
  order: 4;
  gap: 1rem;
  &__ul {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 1rem;
    &__li {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: $font-color;
      padding-top: 12px;
      padding-bottom: 12px;
      gap: 0.5rem;
      font-size: 1.5rem;
      & > a {
        display: flex;
        p {
          display: none;
          font-size: 1.1rem;
        }
      }
      a,
      p {
        color: $font-color;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        svg {
          font-size: 1.5rem;
        }
      }
      &:hover {
        font-weight: bold;
        border-bottom: 2px solid $font-color;
        .navLinkDropdown {
          display: block;
        }
      }
    }
  }
}

.navLinkLevelThree {
  display: none;
  position: absolute;
  top: -10%;
  left: 170px;
  width: 200px;
  z-index: 1000;
}

.navLinkDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-35%);
  width: 200px;
  z-index: 1000;
  background-color: $bg-color;
  border-radius: 10px;
  ul {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    text-align: left;
    background-color: $bg-color;
    border-radius: 10px;
    box-shadow: 0px 4px 14px -2px rgb(0 0 0 / 12%), 0px -5px 14px -2px rgb(0 0 0 / 12%);
    li {
      position: relative;
      display: flex;
      justify-content: space-between;
      a {
        font-weight: normal;
        padding: 0 !important;
        font-size: 1.1rem;
      }
      &:hover {
        .navLinkLevelThree {
          display: block;
        }
        & > a,
        .navLinkLevelThree ul li:hover a {
          font-weight: bold;
        }
      }
    }
  }
}

@include breakpoints.maxwidth("medium") {
  .navLinksContainer {
    height: 100%;
    order: 2;
    max-width: none;
    &__ul__li {
      padding-bottom: 0;
      & > a p {
        display: inline-flex;
      }
      &:hover {
        font-weight: bold;
        border-bottom: 2px solid $font-color;
        .navLinkDropdown {
          transform: translateX(-50%);
        }
      }
    }
  }
}