bulma/sass/components/navbar.sass

$navbar-background-color: var(--scheme-main, #{$scheme-main}) !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: var(--background, #{$background}) !default
$navbar-height: 3.25rem !default
$navbar-padding-vertical: 1rem !default
$navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
$navbar-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default

$navbar-menu-background-color: var(--scheme-main, #{$scheme-main}) !default

$navbar-item-color: var(--text, #{$text}) !default
$navbar-item-hover-color: var(--link, #{$link}) !default
$navbar-item-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$navbar-item-active-color: var(--scheme-invert, #{$scheme-invert}) !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default

$navbar-burger-color: var(--navbar-item-color, #{$navbar-item-color}) !default

$navbar-tab-hover-background-color: transparent !default
$navbar-tab-hover-border-bottom-color: var(--link, #{$link}) !default
$navbar-tab-active-color: var(--link, #{$link}) !default
$navbar-tab-active-background-color: transparent !default
$navbar-tab-active-border-bottom-color: var(--link, #{$link}) !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default

$navbar-dropdown-background-color: var(--scheme-main, #{$scheme-main}) !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: var(--link, #{$link}) !default
$navbar-dropdown-radius: var(--radius-large, #{$radius-large}) !default
$navbar-dropdown-z: 20 !default

$navbar-dropdown-boxed-radius: var(--radius-large, #{$radius-large}) !default
$navbar-dropdown-boxed-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$navbar-dropdown-boxed-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$navbar-dropdown-boxed-shadow: 0 8px 8px $navbar-dropdown-boxed-shadow-color, 0 0 0 1px $navbar-dropdown-boxed-shadow-color-bis !default

$navbar-dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
$navbar-dropdown-item-hover-background-color: var(--background, #{$background}) !default
$navbar-dropdown-item-active-color: var(--link, #{$link}) !default
$navbar-dropdown-item-active-background-color: var(--background, #{$background}) !default

$navbar-divider-background-color: var(--background, #{$background}) !default
$navbar-divider-height: 2px !default

$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default

$navbar-breakpoint: $desktop !default

$navbar-colors: $colors !default

=navbar-fixed
  left: 0
  position: fixed
  right: 0
  z-index: var(--navbar-fixed-z)

.navbar
  --navbar-fixed-z: #{$navbar-fixed-z}
  --navbar-shadow-color: #{$navbar-shadow-color}
  --navbar-menu-background-color: #{$navbar-menu-background-color}
  --navbar-background-color: #{$navbar-background-color}
  --navbar-box-shadow-size: #{$navbar-box-shadow-size}
  --navbar-box-shadow-color: #{$navbar-box-shadow-color}
  --navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size}
  --navbar-height: #{$navbar-height}
  --navbar-padding-vertical: #{$navbar-padding-vertical}
  --navbar-padding-horizontal: #{$navbar-padding-horizontal}
  --navbar-z: #{$navbar-z}
  --navbar-burger-color: #{$navbar-burger-color}
  --navbar-item-color: #{$navbar-item-color}
  --navbar-item-hover-background-color: #{$navbar-item-hover-background-color}
  --navbar-item-hover-color: #{$navbar-item-hover-color}
  --navbar-item-img-max-height: #{$navbar-item-img-max-height}
  --navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color}
  --navbar-tab-hover-border-bottom-color: #{$navbar-tab-hover-border-bottom-color}
  --navbar-tab-active-background-color: #{$navbar-tab-active-background-color}
  --navbar-tab-active-border-bottom-color: #{$navbar-tab-active-border-bottom-color}
  --navbar-tab-active-border-bottom-style: #{$navbar-tab-active-border-bottom-style}
  --navbar-tab-active-border-bottom-width: #{$navbar-tab-active-border-bottom-width}
  --navbar-tab-active-color: #{$navbar-tab-active-color}
  --navbar-dropdown-arrow: #{$navbar-dropdown-arrow}
  --navbar-divider-background-color: #{$navbar-divider-background-color}
  --navbar-divider-height: #{$navbar-divider-height}
  --navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color}
  --navbar-dropdown-item-hover-color: #{$navbar-dropdown-item-hover-color}
  --navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color}
  --navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color}
  --navbar-dropdown-border-top: #{$navbar-dropdown-border-top}
  --navbar-dropdown-background-color: #{$navbar-dropdown-background-color}
  --navbar-dropdown-radius: #{$navbar-dropdown-radius}
  --navbar-dropdown-z: #{$navbar-dropdown-z}
  --navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}
  --navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}
  --navbar-dropdown-offset: #{$navbar-dropdown-offset}
  --navbar-item-active-color: #{$navbar-item-active-color}
  --navbar-item-active-background-color: #{$navbar-item-active-background-color}
  background-color: var(--navbar-background-color)
  min-height: var(--navbar-height)
  position: relative
  z-index: var(--navbar-z)
  @each $name, $pair in $navbar-colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      --navbar-burger-color: var(--#{$name}-invert, #{$color-invert})
      background-color: var(--#{$name}, #{$color})
      color: var(--#{$name}-invert, #{$color-invert})
      .navbar-brand
        & > .navbar-item,
        .navbar-link
          color: var(--#{$name}-invert, #{$color-invert})
        & > a.navbar-item,
        .navbar-link
          --navbar-item-hover-background-delta: -5%
          --navbar-item-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--navbar-item-hover-background-delta)})
          --navbar-item-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--navbar-item-hover-background-#{$name}-l), var(--#{$name}-a))
          &:focus,
          &:hover,
          &.is-active
            background-color: var(--navbar-item-hover-background-color, #{bulmaDarken($color, 5%)})
      +from($navbar-breakpoint)
        --navbar-dropdown-item-active-background-color: var(--#{$name}, #{$color})
        --navbar-dropdown-item-active-color: var(--#{$name}-invert, #{$color-invert})
        .navbar-brand,
        .navbar-start,
        .navbar-end
          & > .navbar-item,
          .navbar-link
            color: var(--#{$name}-invert, #{$color-invert})
          & > a.navbar-item,
          .navbar-link
            &:focus,
            &:hover,
            &.is-active
              background-color: var(--navbar-item-hover-background-color, #{bulmaDarken($color, 5%)})
              color: var(--#{$name}-invert, #{$color-invert})
  & > .container
    align-items: stretch
    display: flex
    min-height: var(--navbar-height)
    width: 100%
  &.has-shadow
    box-shadow: var(--navbar-box-shadow-size) var(--navbar-box-shadow-color)
  &.is-fixed-bottom,
  &.is-fixed-top
    +navbar-fixed
  &.is-fixed-bottom
    bottom: 0
    &.has-shadow
      box-shadow: var(--navbar-bottom-box-shadow-size) var(--navbar-box-shadow-color)
  &.is-fixed-top
    top: 0

html,
body
  &.has-navbar-fixed-top
    padding-top: var(--navbar-height)
  &.has-navbar-fixed-bottom
    padding-bottom: var(--navbar-height)

.navbar-brand,
.navbar-tabs
  align-items: stretch
  display: flex
  flex-shrink: 0
  min-height: var(--navbar-height)

.navbar-brand
  a.navbar-item
    &:focus,
    &:hover
      background-color: transparent

.navbar-tabs
  +overflow-touch
  max-width: 100vw
  overflow-x: auto
  overflow-y: hidden

.navbar-burger
  color: var(--navbar-burger-color)
  +hamburger(var(--navbar-height))
  +ltr-property("margin", auto, false)

.navbar-menu
  display: none

.navbar-item,
.navbar-link
  color: var(--navbar-item-color)
  display: block
  line-height: 1.5
  padding: 0.5rem 0.75rem
  position: relative
  .icon
    &:only-child
      margin-left: -0.25rem
      margin-right: -0.25rem

a.navbar-item,
.navbar-link
  cursor: pointer
  &:focus,
  &:focus-within,
  &:hover,
  &.is-active
    background-color: var(--navbar-item-hover-background-color)
    color: var(--navbar-item-hover-color)

.navbar-item
  flex-grow: 0
  flex-shrink: 0
  img
    max-height: var(--navbar-item-img-max-height)
  &.has-dropdown
    padding: 0
  &.is-expanded
    flex-grow: 1
    flex-shrink: 1
  &.is-tab
    border-bottom: 1px solid transparent
    min-height: var(--navbar-height)
    padding-bottom: calc(0.5rem - 1px)
    &:focus,
    &:hover
      background-color: var(--navbar-tab-hover-background-color)
      border-bottom-color: var(--navbar-tab-hover-border-bottom-color)
    &.is-active
      background-color: var(--navbar-tab-active-background-color)
      border-bottom-color: var(--navbar-tab-active-border-bottom-color)
      border-bottom-style: var(--navbar-tab-active-border-bottom-style)
      border-bottom-width: var(--navbar-tab-active-border-bottom-width)
      color: var(--navbar-tab-active-color)
      padding-bottom: calc(0.5rem - #{var(--navbar-tab-active-border-bottom-width)})

.navbar-content
  flex-grow: 1
  flex-shrink: 1

.navbar-link:not(.is-arrowless)
  +ltr-property("padding", 2.5em)
  &::after
    @extend %arrow
    border-color: var(--navbar-dropdown-arrow)
    margin-top: -0.375em
    +ltr-position(1.125em)

.navbar-dropdown
  font-size: 0.875rem
  padding-bottom: 0.5rem
  padding-top: 0.5rem
  .navbar-item
    padding-left: 1.5rem
    padding-right: 1.5rem

.navbar-divider
  background-color: var(--navbar-divider-background-color)
  border: none
  display: none
  height: var(--navbar-divider-height)
  margin: 0.5rem 0

+until($navbar-breakpoint)
  .navbar > .container
    display: block
  .navbar-brand,
  .navbar-tabs
    .navbar-item
      align-items: center
      display: flex
  .navbar-link
    &::after
      display: none
  .navbar-menu
    background-color: var(--navbar-menu-background-color)
    box-shadow: 0 8px 16px var(--navbar-shadow-color)
    padding: 0.5rem 0
    &.is-active
      display: block
  // Fixed navbar
  .navbar
    &.is-fixed-bottom-touch,
    &.is-fixed-top-touch
      +navbar-fixed
    &.is-fixed-bottom-touch
      bottom: 0
      &.has-shadow
        box-shadow: 0 -2px 3px var(--navbar-shadow-color)
    &.is-fixed-top-touch
      top: 0
    &.is-fixed-top,
    &.is-fixed-top-touch
      .navbar-menu
        +overflow-touch
        max-height: calc(100vh - #{var(--navbar-height)})
        overflow: auto
  html,
  body
    &.has-navbar-fixed-top-touch
      padding-top: var(--navbar-height)
    &.has-navbar-fixed-bottom-touch
      padding-bottom: var(--navbar-height)

+from($navbar-breakpoint)
  .navbar,
  .navbar-menu,
  .navbar-start,
  .navbar-end
    align-items: stretch
    display: flex
  .navbar
    min-height: var(--navbar-height)
    &.is-spaced
      padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal)
      .navbar-start,
      .navbar-end
        align-items: center
      a.navbar-item,
      .navbar-link
        border-radius: var(--radius, #{$radius})
    &.is-transparent
      a.navbar-item,
      .navbar-link
        &:focus,
        &:hover,
        &.is-active
          background-color: transparent !important
      .navbar-item.has-dropdown
        &.is-active,
        &.is-hoverable:focus,
        &.is-hoverable:focus-within,
        &.is-hoverable:hover
          .navbar-link
            background-color: transparent !important
      .navbar-dropdown
        a.navbar-item
          &:focus,
          &:hover
            background-color: var(--navbar-dropdown-item-hover-background-color)
            color: var(--navbar-dropdown-item-hover-color)
          &.is-active
            background-color: var(--navbar-dropdown-item-active-background-color)
            color: var(--navbar-dropdown-item-active-color)
  .navbar-burger
    display: none
  .navbar-item,
  .navbar-link
    align-items: center
    display: flex
  .navbar-item
    &.has-dropdown
      align-items: stretch
    &.has-dropdown-up
      .navbar-link::after
        transform: rotate(135deg) translate(0.25em, -0.25em)
      .navbar-dropdown
        border-bottom: var(--navbar-dropdown-border-top)
        border-radius: var(--navbar-dropdown-radius) var(--navbar-dropdown-radius) 0 0
        border-top: none
        bottom: 100%
        box-shadow: 0 -8px 8px var(--navbar-shadow-color)
        top: auto
    &.is-active,
    &.is-hoverable:focus,
    &.is-hoverable:focus-within,
    &.is-hoverable:hover
      .navbar-dropdown
        display: block
        .navbar.is-spaced &,
        &.is-boxed
          opacity: 1
          pointer-events: auto
          transform: translateY(0)
  .navbar-menu
    flex-grow: 1
    flex-shrink: 0
  .navbar-start
    justify-content: flex-start
    +ltr-property("margin", auto)
  .navbar-end
    justify-content: flex-end
    +ltr-property("margin", auto, false)
  .navbar-dropdown
    background-color: var(--navbar-dropdown-background-color)
    border-bottom-left-radius: var(--navbar-dropdown-radius)
    border-bottom-right-radius: var(--navbar-dropdown-radius)
    border-top: var(--navbar-dropdown-border-top)
    box-shadow: 0 8px 8px var(--navbar-shadow-color)
    display: none
    font-size: 0.875rem
    +ltr-position(0, false)
    min-width: 100%
    position: absolute
    top: 100%
    z-index: var(--navbar-dropdown-z)
    .navbar-item
      padding: 0.375rem 1rem
      white-space: nowrap
    a.navbar-item
      +ltr-property("padding", 3rem)
      &:focus,
      &:hover
        background-color: var(--navbar-dropdown-item-hover-background-color)
        color: var(--navbar-dropdown-item-hover-color)
      &.is-active
        background-color: var(--navbar-dropdown-item-active-background-color) !important
        color: var(--navbar-dropdown-item-active-color)
    .navbar.is-spaced &,
    &.is-boxed
      border-radius: var(--navbar-dropdown-boxed-radius)
      border-top: none
      box-shadow: var(--navbar-dropdown-boxed-shadow)
      display: block
      opacity: 0
      pointer-events: none
      top: calc(100% + #{var(--navbar-dropdown-offset)})
      transform: translateY(-5px)
      transition-duration: var(--speed, #{$speed})
      transition-property: opacity, transform
    &.is-right
      left: auto
      right: 0
  .navbar-divider
    display: block
  .navbar > .container,
  .container > .navbar
    .navbar-brand
      +ltr-property("margin", -.75rem, false)
    .navbar-menu
      +ltr-property("margin", -.75rem)
  // Fixed navbar
  .navbar
    &.is-fixed-bottom-desktop,
    &.is-fixed-top-desktop
      +navbar-fixed
    &.is-fixed-bottom-desktop
      bottom: 0
      &.has-shadow
        box-shadow: 0 -2px 3px var(--navbar-shadow-color)
    &.is-fixed-top-desktop
      top: 0
  html,
  body
    &.has-navbar-fixed-top-desktop
      padding-top: var(--navbar-height)
    &.has-navbar-fixed-bottom-desktop
      padding-bottom: var(--navbar-height)
    &.has-spaced-navbar-fixed-top
      padding-top: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
    &.has-spaced-navbar-fixed-bottom
      padding-bottom: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
  // Hover/Active states
  a.navbar-item,
  .navbar-link
    &.is-active
      color: var(--navbar-item-active-color)
    &.is-active:not(:focus):not(:hover)
      background-color: var(--navbar-item-active-background-color)
  .navbar-item.has-dropdown
    &:focus,
    &:hover,
    &.is-active
      .navbar-link
        background-color: var(--navbar-item-hover-background-color)

// Combination

.hero
  &.is-fullheight-with-navbar
    min-height: calc(100vh - #{var(--navbar-height)})