cremeaux/assets/styles/header.sass

// HEADER

.header
  height: 40vh
  position: relative

  &.actu
    background-color: var(--color-green)
    height: calc(106px + 4rem + 2rem)
    .nav
      top: 2rem

    @media screen and (max-width: $size-md)
      height: calc(86px + 4rem + 2rem)

    @media screen and (max-width: $size-sm)
      height: calc(86px + 3rem + 2rem)
      .nav
        top: 1.5rem

  &.home
    height: 60vh
    .hero
      height: 60vh

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

  $nav-height: 70px
  .nav
    position: absolute
    top: 50px
    bottom: 0
    left: 0
    right: 0
    background-color: var(--color-secondary)
    height: $nav-height
    z-index: 50

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

    .viemunicipale a
      color: var(--color-green)!important

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

  .logo
    position: relative
    z-index: 20
    margin: -1rem 1rem -1rem 0
    background: white
    box-shadow: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2)

    a
      margin: 1rem
      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

    li
      padding-bottom: 0

    .viemunicipale, .viemunicipale a
      color: var(--color-green)
      font-weight: bold
    .cadredevie, .cadredevie a
      color: var(--color-blue)
      font-weight: bold
    .economie, .economie a
      color: var(--color-orange)
      font-weight: bold
    .associations, .associations a
      color: var(--color-purple)
      font-weight: bold

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

    .submenu
      list-style-type: none
      display: none
      position: absolute
      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
      z-index: 10

      a
        padding: 10px 0 0

    .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 var(--color-green)
      	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

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

      &:hover
        transform: scale(1.05)

    img
      margin: 0 10px 0 0

      @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: white
      justify-content: center
      flex-wrap: wrap
      align-items: last baseline
      align-content: center

      .viemunicipale
        order: 1
      .economie
        order: 2
      .cadredevie
        order: 3
      .associations
        order: 4

      img
        display: inherit

      .menu
        height: auto
        width: 200px
        flex-direction: column
        margin: .7rem
        padding: .7rem
        box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px

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

        a
          padding: 2px 10px

      .menu:before
        content: none

    @media screen and (max-width: 320px)
      font-size: .9rem
      flex-direction: row
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      .menu
        width: 150px
        a
          padding: 0
      .submenu
        font-size: .8rem
      img
        display: none

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

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

  @media screen and (max-width: $size-md)
    .nav[data-open="true"]
      .open-button
        display: none
      .close-button, #menu
        display: inherit
    .nav[data-open="false"]
      .open-button
        display: inherit
      .close-button, #menu
        display: none