.xsd-nav-app
  @extend .navbar
  @extend .navbar-nav
  @extend .navbar-inverse

  background: $brand-background

  position: sticky
  top: 0
  z-index: $zindex-nav-top
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.1)

.xsd-nav-app__container
  @extend .container
  display: flex
  padding-left: 0
  padding-right: 0

.xsd-nav-app__brand
  @extend .navbar-brand
  @include hide-sm

  margin-right: 2.5rem

.xsd-nav-app__brand-logo, .xsd-nav-app__nav-link-text-logo
  float: left
  height: 1.5em
  margin-right: 0.3em

.xsd-nav-app__title
  @extend .navbar-brand
  @include hide-md

.xsd-nav-app__hamburger
  @extend .navbar-brand
  @include hide-md

.xsd-nav-app__nav
  @extend .nav
  @extend .navbar-nav
  width: 100%

.xsd-nav-app__nav-item
  @extend .nav-item

.xsd-nav-app__nav-link
  @extend .nav-link

.xsd-nav-app__nav-module
  //@include hide-md
  display: none

.xsd-nav-app__nav-dashboard
  display: none

.xsd-nav-app__nav-help
  @include media-breakpoint-up(md)
    .text
      display: none

@include media-breakpoint-only(md)
  // Hide app titles on medium
  .xsd-nav-app__nav-link-title
    display: none
  // Have a bit more padding to aid with tapping
  .xsd-nav-app__nav-link
    padding-left: 0.5rem
    padding-right: 0.5rem

// Auth Dropdown
.xsd-nav-app__nav-item-xsd_auth
  .xsd-nav-app__nav-item-xsd_auth__i-dropdown
    display: none
  @include media-breakpoint-up(md)
    .xsd-nav-app__nav-link-icon
      display: none
    .xsd-nav-app__nav-item-xsd_auth__i-dropdown
      display: inline

    .dropdown-menu
      min-width: 190px

    .xsd-nav-module
      list-style: none
      padding: 0

    .xsd-nav-module__header
      font-size: 0
      margin-top: 0.25rem
      margin-bottom: 0.25rem
      border-top: 1px solid #eee
      &:first-child
        display: none

    .xsd-nav-module__item
      padding: 0.5em

// Desktop top nav
@include media-breakpoint-up(md)
  .xsd-nav-app__nav-item
    margin-right: 1rem

  .xsd-nav-app__nav-inner
    display: flex

  .xsd-nav-app__nav-item-xsd_auth, .xsd-nav-app__nav-item-xsd_help
    align-self: flex-end
    margin-right: 0 // Override as on end

  .xsd-nav-app__nav-item-xsd_auth
    order: 95
  .xsd-nav-app__nav-help
    order: 90
    margin-left: auto


// Mobile side nav
@include media-breakpoint-down(sm)
  .xsd-nav-app
    // Corrections for BS4
    padding: 0.5rem 1rem
  .xsd-nav-app__container
    // Corrections for BS4
    margin-left: 0
    margin-right: 0

  .xsd-nav-app__nav
    position: fixed
    height: 100%
    width: 75%
    min-width: 300px
    max-width: 400px
    left: 0
    top: 0
    overflow: hidden

    z-index: $zindex-nav-drawer

    background: $color-sidenav-background
    padding: 0

    will-change: transform
    transform: translateX(-102%)

    &.xsd-nav-app__nav--visible
      transform: none

    .xsd-nav-app__nav-item
      // Reset from bootstrap
      display: block
      float: none
      margin: 0

    .xsd-nav-app__nav-item + .xsd-nav-app__nav-item
      margin-left: 0

  $nav-entry-time: 0.33s
  $nav-exit-time: 0.20s
  $nav-scroll-time: 0.4s
  $nav-animate-curve: cubic-bezier(0,0,0.3,1)

  .xsd-nav-app__nav--animate
    transition: transform $nav-exit-time $nav-animate-curve // Fast exit
    &.xsd-nav-app__nav--visible
      transition: transform $nav-entry-time $nav-animate-curve // Slow entry

  .xsd-nav-app__nav-inner

  .xsd-nav-app__nav-inner--animate
    // Inertial scrolling
    transition: transform $nav-scroll-time $nav-animate-curve // Fast exit

  // Makes the page black
  .xsd-nav-app__blur
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%

    z-index: $zindex-blur

    background: #000
    opacity: 0

    pointer-events: none

    transition: opacity $nav-exit-time cubic-bezier(0,0,0.3,1) // Fast exit

    &.xsd-nav-app__blur--visible
      pointer-events: auto
      opacity: 0.8
      transition: opacity $nav-entry-time cubic-bezier(0,0,0.3,1) // Slow entry

  // App selection
  $sidenav-link-pad-sides: 1rem
  $sidenav-link-pad: 0 $sidenav-link-pad-sides
  $app-switch-speed: 0.1s
  .xsd-nav-app__nav-item
    .xsd-nav-app__nav-module
      display: block
      // Animated Selection
      overflow: hidden
      transition: max-height $app-switch-speed $nav-animate-curve

    .xsd-nav-app__nav-link
      padding: 0.7rem $sidenav-link-pad-sides !important
      background: mix($color-sidenav-background, black, 90%)
      .xsd-nav-app__nav-link-text
        // Ensure clicks go to the parent element
        pointer-events: none

    &.active
      .xsd-nav-app__nav-link
        border-left: 3px solid $color-sidenav-selection
        .xsd-nav-app__nav-link-text
          position: relative
          left: -3px

    &.selected
      transition: max-height $app-switch-speed $nav-animate-curve

  .xsd-nav-app__nav-dashboard
    // Sidenav application banner / dashboard
    display: block
    .xsd-nav-app__nav-link
      padding-top: 5em !important
      background: $color-sidenav-brand
    &.active
      .xsd-nav-app__nav-link
        border-left-color: white

  // Each app's links
  .xsd-nav-app__nav-module
    background: $color-sidenav-background

    .xsd-nav-module
      list-style: none
      margin: 0
      padding: 0

    .xsd-nav-module__header
      padding: $sidenav-link-pad
      color: mix($color-sidenav-background, white)
      font-size: 0.7em
      padding-top: 0.5em
      text-transform: uppercase


    .xsd-nav-module__link
      display: block
      padding: 0.5rem $sidenav-link-pad-sides

      color: #eee

      &:hover
        text-decoration: none

      &.active
        border-left: 3px solid $color-sidenav-selection
        .xsd-nav-module__link-text
          position: relative
          left: -3px

