<div id="app">
  <input id="mobile-menu-btn" class="mobile-menu-btn" type="checkbox">
  <label
    class="mobile-menu-label"
    for="mobile-menu-btn"
  >
    <span class="navicon"></span>
    <i class="bi bi-x"></i>
  </label>

  <div class="mobile-menu__overlay">
  </div>

  <div class="mobile-menu">
    <div class="mobile-menu__content">
      <p class="mobile-menu__content-title">
        其他活動
      </p>
      <ul>
        <li class="mobile-menu__link">
          <a href="#">活動 A</a>
        </li>
        <li class="mobile-menu__link">
          活動 B
        </li>
        <li class="mobile-menu__link">
          活動 C
        </li>
      </ul>
    </div>
  </div>
</div>

.mobile-menu-label{
  float: right;
  cursor: pointer;
  position: relative;
  user-select: none;
  padding: 9px;

  @media (min-width: 768px){
    display: none;
  }

  &::after {
    content: "";
    display: block;
    clear: both;
  }

  .navicon{
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: all .2s ease-out;
    width: 18px;

    &::before,
    &::after{
      background: #333;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }

    &::before{
      top: 5px;
    }

    &::after{
      top: -5px;
    }
  }

  .bi-x{
    display: none;
    font-size: 24px;
    color: white;
  }
}

.mobile-menu-btn{
  display: none;
  &:checked{
    ~.mobile-menu-label .navicon{
      background: transparent;
      opacity: 0;
    }

    ~.mobile-menu-label .bi-x{
      display: block;
    }

    ~.mobile-menu-label{
      z-index: 1000;
      position: absolute;
      left:0;
      top:12%;

      @media (min-width: 400){
        left:38%;
      }
    }

    ~.mobile-menu__overlay{
      opacity: 0.75;
      z-index: 20;
      height: 100vh;

      @media (min-width: 768px){
        opacity: 0;
        z-index: -1;
        height: 0;
      }
    }

    ~.mobile-menu{
      opacity: 1;
      z-index: 25;
      height: 100vh;

      @media (min-width: 768px){
        opacity: 0;
        z-index: -1;
        height: 0;
        width:0;
      }
    }

    ~.mobile-menu__overlay,
    ~.mobile-menu{
      transition: all 0.2s ease-in;
    }
  }
}

.mobile-menu__overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: black;
  opacity: 0;
  z-index: -1;
}

.mobile-menu{
  position: absolute;
  padding: 25px;
  top:0;
  right:0;
  width: 80%;
  height: 0;
  opacity: 0;
  background-color: #fff;
  z-index: -1;

  @media (min-width: 400px){
    width: 50%;
  }

  @media (min-width: 768px){
    width:0;
  }

  .mobile-menu__content{
    .mobile-menu__content-title{
      font-size:16px;
      font-weight: 600;
    }
  }

  .mobile-menu__link{
    width: 100%;
    display: inline-block;
    margin: 0.5rem 0 0.5rem 0.5rem;
    font-size: 16px;
    color: #797979;
    font-weight: 400;

    &.mobile-menu__link--active{
      color: #000;
    }
  }
}

new Vue({
  el: '#app'
})