_patterns_side-navigation.scss

@import 'settings';

@mixin vf-p-side-navigation {
  // space for the right hand icon with default inner spacing on the left
  $sp-sidenav--icon-spacing-width: map-get($icon-sizes, default) + $sph-inner;

  .p-side-navigation,
  .p-side-navigation--icons {
    & > .p-side-navigation__list:first-child {
      // nudge from top to put text on baseline grid
      padding-top: 0.5 * $spv-inner--x-small;
    }
  }

  .p-side-navigation__list {
    @extend %vf-list;

    & + & {
      @extend %vf-pseudo-border--top;

      &::after {
        @include vf-side-navigation-spacing-left($prop: left);
        top: -0.5 * $spv-outer--scaleable; // place border in the middle of the margin
      }

      .p-side-navigation--icons &::after {
        @include vf-side-navigation-spacing-left($prop: left, $offset: $sp-sidenav--icon-spacing-width);
      }
    }
  }

  .p-side-navigation__item--title {
    font-weight: $font-weight-bold;
  }

  .p-side-navigation__text,
  .p-side-navigation__link {
    @include vf-side-navigation-spacing-left;

    display: flex;
    padding-bottom: $spv-inner--x-small;
    padding-right: $sph-inner;
    padding-top: $spv-inner--x-small;

    .p-side-navigation--icons & {
      @include vf-side-navigation-spacing-left($offset: $sp-sidenav--icon-spacing-width);
      position: relative;
    }

    // nested 2nd level of navigation
    .p-side-navigation__item .p-side-navigation__item & {
      @include vf-side-navigation-spacing-left($multiplier: 2);

      // add spacing for variant with right side icons
      .p-side-navigation--icons & {
        @include vf-side-navigation-spacing-left($multiplier: 2, $offset: $sp-sidenav--icon-spacing-width);
      }
    }

    // nested 3rd level of navigation
    .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
      @include vf-side-navigation-spacing-left($multiplier: 3);

      // add spacing for variant with right side icons
      .p-side-navigation--icons & {
        @include vf-side-navigation-spacing-left($multiplier: 3, $offset: $sp-sidenav--icon-spacing-width);
      }
    }
  }

  .p-side-navigation--icons {
    .p-side-navigation__icon {
      @include vf-side-navigation-spacing-left($prop: left);
      position: absolute;
      top: $sph-inner--small;
    }
  }

  .p-side-navigation__link {
    @include vf-focus;

    // vf-highlight-bar is rendered above focus outline
    // so we need to hide it on focus
    &:focus::before {
      display: none;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .p-side-navigation__status {
    margin-left: auto;
    padding-left: $spv-inner--small;
  }

  // Theming
  @if ($theme-default-p-side-navigation == 'dark') {
    .p-side-navigation,
    .p-side-navigation--icons {
      @include vf-side-navigation-theme-dark;

      &.is-light {
        @include vf-side-navigation-theme-light;
      }
    }
  } @else {
    .p-side-navigation,
    .p-side-navigation--icons {
      @include vf-side-navigation-theme-light;

      &.is-dark {
        @include vf-side-navigation-theme-dark;
      }
    }
  }
}

// helper

// elements in side nav should be aligned from left based on grid margin for given screen size
// additional offset is added when icons are used or for nested navigation levels
@mixin vf-side-navigation-spacing-left(
  // property to adjust spacing, defaults to `padding-left`
    $prop: padding-left,
  // how many times grid margin width should be multiplied (for nested navigation levels)
    $multiplier: 1,
  // offset to use for additional spacing (for icons)
    $offset: 0
) {
  @media (max-width: $threshold-4-6-col) {
    #{$prop}: $multiplier * map-get($grid-margin-widths, small) + $offset;
  }

  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
    #{$prop}: $multiplier * map-get($grid-margin-widths, medium) + $offset;
  }

  @media (min-width: $threshold-6-12-col) {
    #{$prop}: $multiplier * map-get($grid-margin-widths, large) + $offset;
  }
}

// theme
@mixin vf-side-navigation-theme(
  // default text color in sidebar
    $color-sidenav-text-default,
  // text color of highlighted items
    $color-sidenav-text-active,
  // background color of active/hovered items
    $color-sidenav-item-background-highlight,
  // border color of active item
    $color-sidenav-item-border-highlight,
  // border color of items list
    $color-sidenav-list-border
) {
  & {
    color: $color-sidenav-text-default;
  }

  .p-side-navigation__list::after {
    background: $color-sidenav-list-border;
  }

  .p-side-navigation__link {
    &,
    &:visited {
      color: $color-sidenav-text-default;
    }

    &:hover,
    &.is-active {
      background: $color-sidenav-item-background-highlight;
      color: $color-sidenav-text-active;
    }

    &.is-active {
      @include vf-highlight-bar($color-sidenav-item-border-highlight, left);
    }
  }
}

@mixin vf-side-navigation-theme-light {
  @include vf-side-navigation-theme(
    $color-sidenav-text-default: $colors--light-theme--text-muted,
    $color-sidenav-text-active: $colors--light-theme--text-default,
    $color-sidenav-item-background-highlight: $colors--light-theme--background-highlight,
    $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
    $color-sidenav-list-border: $colors--light-theme--border-low-contrast
  );
}

@mixin vf-side-navigation-theme-dark {
  @include vf-side-navigation-theme(
    $color-sidenav-text-default: $colors--dark-theme--text-muted,
    $color-sidenav-text-active: $colors--dark-theme--text-default,
    $color-sidenav-item-background-highlight: $colors--dark-theme--background-highlight,
    $color-sidenav-item-border-highlight: $colors--dark-theme--text-default,
    $color-sidenav-list-border: $colors--dark-theme--border-low-contrast
  );
}