cremeaux/assets/styles/header.sass

// HEADER

.header
  height: 40vh
  position: relative

  &.home
    height: 80vh
    .hero
      height: 80vh

  .hero
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    z-index: -1
    object-fit: cover
    width: 100%
    height: 40vh
    background-color: $orange

  $nav-height: 70px
  .nav
    position: absolute
    top: 50px
    bottom: 0
    left: 0
    right: 0
    background-color: $vert
    height: $nav-height

    @media screen and (max-width: $size-md)
      top: 30px
      height: 50px

  .container
    display: flex
    align-items: center
    justify-content: space-between

  .logo
    $size-border-logo: 20px
    position: relative
    padding-left: $size-border-logo
    z-index: 20
    margin-right: 40px

    &::after
      position: absolute
      content: ""
      top: -$size-border-logo
      bottom: -$size-border-logo
      left: 0
      right: -$size-border-logo
      background-color: white
      z-index: 10

    a
      display: block

    img
      position: relative
      height: $nav-height
      width: 214px
      z-index: 30
      text-align: center

      @media screen and (max-width: $size-md)
        height: 50px
        width: 154px

  #menu
    list-style-type: none
    display: flex
    align-items: center
    padding: 0
    margin: 0
    height: $nav-height

    @media screen and (max-width: $size-xl)
      font-size: .95rem

    .submenu
      list-style-type: none
      display: none
      position: absolute
      color: $vert
      background: white
      top: $nav-height
      flex-direction: column
      margin: 0
      padding: 1rem
      width: max-content
      box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px

      a
        color: $vert
        padding: 10px 0 0

        &:hover
          text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)

    .menu:hover .submenu
      display: flex

    .menu.withSubmenu:hover::after
      	content: ''
      	display: block
      	position: absolute
      	left: calc(50% - 7.5px)
      	top: 100%
      	width: 0
      	height: 0
      	border-top: 15px solid $vert
      	border-right: 15px solid transparent
      	border-bottom: 0 solid transparent
      	border-left: 15px solid transparent
        z-index: 10000

    .menu
      display: flex
      align-items: center
      position: relative
      height: 100%

      &:first-child::before
        content: none

      &::before
        content: ""
        border-right: 2px white solid
        right: 0
        height: 20px

    a
      color: white
      display: flex
      align-items: center
      padding: 0 10px
      height: 100%
      text-decoration: none

      &:hover
        text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)

    img
      padding: 0 10px

      @media screen and (max-width: $size-lg) and (min-width: $size-md)
        display: none

    span
      white-space: nowrap

    @media screen and (max-width: $size-md)
      display: none
      position: fixed
      top: 0
      bottom: 0
      left: 0
      right: 0
      height: 100vh
      z-index: 100
      background: $vert
      flex-direction: column
      justify-content: center

      &:hover
        display: inherit

      &:hover + .close-button
        display: inherit

      img
        display: inherit

      .menu
        height: auto
        flex-direction: column
        margin-bottom: 1rem

      .menu.withSubmenu
        padding: 10px

      .submenu
        display: flex
        position: relative
        top: 0
        padding: 0
        margin-top: 1rem
        border-radius: 6px

        &::before
          	content: ''
          	display: block
          	position: absolute
          	left: calc(50% - 15px)
          	top: -15px
          	width: 0
          	height: 0
          	border-top: 0 solid transparent
          	border-right: 15px solid transparent
          	border-bottom: 15px solid white
          	border-left: 15px solid transparent
            z-index: 10000

        a
          padding: 2px 10px

      .menu:before
        content: none

  .open-button
    display: none
    white-space: nowrap

    &:focus + #menu
      display: inherit

    &:focus + #menu + .close-button
      display: inherit

    @media screen and (max-width: $size-md)
      display: inherit

  .close-button
    white-space: nowrap
    display: none
    z-index: 200