alexdaniels.me/assets/styles/scss/front/_menu.scss

@use '../shared/colors' as colors;

header {
  display: block;
  position: sticky;
  overflow: auto;
  width: 100%;
  height: 50px;
  top: 0;
  padding-bottom: 1rem;
  background-color: colors.$carbonBlack;

  @media (min-width: 600px) {
    height: 500px;
    
  }

  &.open {
    overflow: visible;
  }

  &.open {
    .top {
      h1 {
        display: none;
      }
    }
  }


  nav.main {
    display: block;
    position: relative;

    @media (min-width: 600px) {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .top {
      display: flex;

      h1 {
        margin: 0;
        
        a {
          display: block;
          position: relative;
          top: 1rem;
          left: 1rem;
          
          font-size: 1.5rem;
          text-decoration: none;
          color: colors.$primaryBlack;
          background-color: colors.$primaryYellow;
          border: 2px solid colors.$primaryYellow;
          padding: 2px 2px;
  
          &:hover {
            color: colors.$primaryYellow;
            background-color: unset;
          }
        }
      }

      .icon {
        &.icon-menu {
          display: block;
          position: absolute;
          top: 1rem;
          right: 1rem;
          width: 35px;
          height: 35px;
          z-index: 999;
          transition: right 100ms ease;

          @media screen and (min-width: 600px) {
            display: none;
          }

          &:before {
            content: '';
            display: block;
            background-image: url('/icons/menu-grid.svg');
            background-size: 100%;
            position: absolute;
            width: 35px;
            height: 35px;
          }

          &:hover {
            cursor: pointer;
          }

          &.open {
            right: 325px;
            &:before {
              background-image: url('/icons/menu-close.svg');
            }

          }
        }
      }
    }

    menu {
      position: absolute;
      right: 0;
      top: 0;
      width: 0;
      background-color: colors.$primaryYellow;
      overflow: hidden;
      padding: 0;
      margin: 0;
      transition: width 100ms ease;

      @media (min-width: 600px) {
        position: relative;
        top: unset;
        right: unset;
        width: 100%;
        transition: unset;
        background-color: unset;
      }
      
      &.open {
          width: 300px;
          box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45);
      }

      li {
        padding: 1rem 2rem;

        a {
          display: block;
          color: colors.$primaryWhite;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}