_side-nav.scss

@import '../../globals/vars';
@import '~carbon-components/scss/components/ui-shell/side-nav';

.#{$prefix}--side-nav {
  background-color: $ui-05;
  color: $ui-02;

  &:hover {
    width: 16rem;
  }

  @media (min-width: 66em) {
    transform: translateX(0);
    width: 3rem;
  }

  &--expanded {
    width: 16rem;
    transform: translateX(0);
  }

  &__icon > svg {
    fill: $ui-01;
  }

  &__submenu[aria-haspopup='true'],
  .#{$prefix}--side-nav__link,
  a.#{$prefix}--side-nav__link--current > span.#{$prefix}--side-nav__link-text {
    color: $ui-02;
  }

  .#{$prefix}--side-nav__link {
    align-items: center;
    display: flex;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16px;
    line-height: 1.125rem;
    min-height: 2rem;
    outline: 2px solid transparent;
    outline-offset: -2px;
    padding: 0 $spacing-05;
    position: relative;
    text-decoration: none;
    transition: color $duration--fast-02, background-color $duration--fast-02,
      outline $duration--fast-02;

    &:focus {
      outline: 2px solid $interactive-01;
      outline-offset: -2px;
    }
  }
  // need to override the carbon-components new aria-current page because it's assuming a white theme
  & a.#{$prefix}--side-nav__link[aria-current='page'] {
    background-color: $gray-70;
    .#{$prefix}--side-nav__link-text {
      color: $ui-02;
    }
  }

  &:not(.#{$prefix}--side-nav--expanded) {
    .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu[aria-expanded='true'] {
      position: relative;
    }

    .#{$prefix}--side-nav__item--active
      .#{$prefix}--side-nav__submenu[aria-expanded='true']::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 4px;
      background-color: $interactive-01;
    }

    [aria-expanded='true'] + .#{$prefix}--side-nav__menu {
      height: 0;
      .#{$prefix}--side-nav__link--current,
      .#{$prefix}--side-nav__link--current::before {
        background: $ui-05;
        color: $ui-05;
      }
    }
  }
}

.#{$prefix}--side-nav__link-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.#{$prefix}--side-nav__item--active {
  background-color: $gray-70;
  color: $ui-02;

  & .#{$prefix}--side-nav__submenu-title {
    color: $ui-02;
  }

  & .#{$prefix}--side-nav__submenu[aria-expanded='false'] {
    background-color: $gray-70;
    color: $ui-02;
  }
}

a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text {
  color: $ui-02;
}

.#{$prefix}--side-nav__item {
  &:hover {
    .#{$prefix}--side-nav__submenu,
    .#{$prefix}--side-nav__menu,
    .#{$prefix}--side-nav__link {
      background-color: $inverse-02;
    }

    .#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover {
      background-color: $gray-70;
    }
  }

  &:not(.#{$prefix}--side-nav__item--active) {
    & > .#{$prefix}--side-nav__link:hover {
      background-color: $inverse-02;

      & > span {
        color: $ui-02;
      }
    }
    .#{$prefix}--side-nav__menu-item > .#{$prefix}--side-nav__link:hover > span {
      color: $ui-02;
    }
  }
}

button.#{$prefix}--side-nav__link {
  appearance: none;
  background-color: transparent;
  border: none;
  width: 100%;
}

.#{$prefix}--side-nav__link[aria-current='page']::before,
.#{$prefix}--side-nav__link--current::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background-color: $interactive-01;
}

.#{$prefix}--side-nav__menu .#{$prefix}--side-nav__link[role='menuitem'] {
  height: 2rem;
  min-height: 2rem;
  padding-left: 2rem;
}

.#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
  .#{$prefix}--side-nav__link[role='menuitem'] {
  padding-left: 4.5rem;
}

.#{$prefix}--side-nav__items .#{$prefix}--side-nav__item > *:not([class='bx--side-nav__menu']),
.#{$prefix}--side-nav__items
  .#{$prefix}--side-nav__item
  .#{$prefix}--side-nav__menu
  .#{$prefix}--side-nav__menu-item
  > *:not([class='bx--side-nav__menu']) {
  height: 3rem;
}

// RTL style fixes
html[dir='rtl'] {
  .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
    margin-right: unset;
    margin-left: 1.5rem;
  }

  .#{$prefix}--header__menu-trigger {
    margin-right: 0;
  }

  .#{$prefix}--side-nav {
    left: auto;
    right: 0;
  }

  .#{$prefix}--side-nav__link[aria-current='page']::before,
  .#{$prefix}--side-nav__link--current::before,
  .#{$prefix}--side-nav:not(.#{$prefix}--side-nav--expanded)
    .#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu[aria-expanded='true']::before,
  .#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu[aria-expanded='false']::before {
    left: auto;
    right: 0;
  }
}