@import '~styles/settings.scss';

.navbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  @media #{$desktop} {
    flex-direction: row;
    align-items: center;
    height: 100%;
  }
}

.logo {
  width: 136px;
  height: 13px;
}

.linkWrapper {
  height: 100%;
}

.menuLink {
  padding: 17px 0 18px;
}

.link {
  display: flex;
  align-items: center;
  color: $theme-color;
  font-size: $font-size-s;
  font-weight: $font-weight-bold;
  letter-spacing: 1px;
  padding-top: 20px;
  position: relative;

  &.active::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    background-color: $theme-secondary;
    width: 100%;
    height: 3px;
  }

  @media #{$desktop} {
    margin-right: 40px;
    text-decoration: none;
    position: relative;
    height: 100%;
    padding: 0;

    &.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: $theme-secondary;
      width: 100%;
      height: 3px;
    }
  }
}

@import '~styles/settings.scss';

.navbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  @media #{$desktop} {
    flex-direction: row;
    align-items: center;
    height: 100%;
  }
}

.logo {
  width: 136px;
  height: 13px;
}

.linkWrapper {
  height: 100%;
}

.menuLink {
  padding: 17px 0 18px;
}

.link {
  display: flex;
  align-items: center;
  color: $theme-color;
  font-size: $font-size-s;
  font-weight: $font-weight-bold;
  letter-spacing: 1px;
  padding-top: 20px;
  position: relative;
  font-family: $font-family-1;

  &.active::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    background-color: $theme-secondary;
    width: 100%;
    height: 3px;
  }

  @media #{$desktop} {
    margin-right: 40px;
    text-decoration: none;
    position: relative;
    height: 100%;
    padding: 0;

    &.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: $theme-secondary;
      width: 100%;
      height: 3px;
    }
  }
}

Use Lato always for nav menu
Use Lato always for nav menu
