@blexar/framework/src/components/nav.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.nav
  padding: $padding
  background-color: $white
  scroll-behavior: smooth

  &.has-icons .nav-submenu
    padding: 0.75em 0.75em 0.75em 2.2em

.nav-label
  font-weight: $font-weight-bold
  padding: 0.75em 1em
  color: $black
  font-size: $font-size[2]
  margin: 1em 0

.nav-menu, .nav-submenu
  margin: $margin 0
  list-style: none
  padding-{$dir-start}: 0

.nav-submenu
  display: none
  padding: 0.75em

  .nav-link
    border-radius: 0
    padding: 0.5em 0.75em

    &.is-active
      color: $primary
      border-{$dir-start}-width: 2px
      border-style: solid
      border-color: $primary

.nav-wrapper
  overflow: hidden

.nav-link, .nav-toggle
  display: flex
  align-items: center
  position: relative
  display: block
  border-radius: $border-radius
  padding: 0.75em 1em
  color: $black
  background: transparent
  border: 0
  width: 100%
  text-align: $dir-start
  cursor: pointer
  @extend $normal

  &:focus, .is-active
    outline: none
    color: $primary

  &:hover
    color: $primary

  .icon
    margin-{$dir-end}: $margin

.nav-icon
  width: 15px
  height: 15px
  position: absolute
  {$dir-end}: 10px
  top: 50%
  transform: translateY(-50%)
  display: flex
  align-items: center
  pointer-events: none

  &:after, &:before
    width: 7.5px
    height: 2px
    content: ''
    display: block
    background: $gray
    transition: transform 0.2s ease-in-out

  &:after
    transform: rotate(-45deg)
    margin-{$dir-start}: -1.75px

  &:before
    transform: rotate(45deg)
    margin-{$dir-end}: -1.75px

  .nav-item.is-active &
    &:after
      transform: rotate(45deg)
      background: $primary

    &:before
      transform: rotate(-45deg)
      background: $primary

.nav-item
  margin-top: 0
  list-style: none

  &.is-active
    .nav-submenu
      display: block

    .nav-toggle
      color: $primary
      font-weight: $font-weight-medium
      box-shadow: boxShadow(small)