Netflix Sidebar（原生JS版）

效果說明

點擊左上方的menu按鈕（俗稱漢堡排），然後Sidebar從側邊滑出。滑出的特殊效果會有三層不同顏色的，最裡面那層是白底，置入選單文字。

實作邏輯

html（節錄）

// 從外層到內層：nav-black > nav-red > nav-white
<div class="nav nav-black">
      <div class="nav nav-red">
        <div class="nav nav-white">
          <button class="nav-btn close-btn">
            <i class="fas fa-times"></i>
          </button>

          <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_Logo_2014-700x188.png" alt="Logo" class="logo">

          <ul class="list">
            <li><a href="#">Teams</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Life at Netflix</a></li>
            <li>
              <ul>
                <li><a href="#">Netflix culture memo</a></li>
                <li><a href="#">Work life balance</a></li>
                <li><a href="#">Inclusion & diversity</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

scss部分（節錄）
主要運用transition-delay來控制不同屬性延遲發生的時間，

.nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;

  &.visible {
    transition-delay: 0s;
  }

  .nav-red {
    background-color: rgb(229, 9, 20);
    width: 95%;
    transition-delay: 0.2s;
  
    &.visible {
      transition-delay: 0.2s;
    }
    
    .nav-white {
      background-color: #fff;
      width: 95%;
      padding: 40px;
      position: relative;
      transition-delay: 0s;
    
      &.visible {
        transition-delay: 0.4s;
      }
      
      .close-btn {
        opacity: 0.3;
        position: absolute;
        top: 40px;
        right: 30px;
      }
      
      .list {
        list-style-type: none;
        padding: 0;
      
        li {
          list-style-type: none;
          padding-left: 20px;
          margin: 20px 0;
      
          a {
            color: rgb(34, 31, 31);
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
          }

          ul {
            list-style-type: none;
            padding-left: 20px;
          }

        }
      }
    }
  }
}

javascript部分
單純用監聽器add或remove .visible選擇器

const open_btn = document.querySelector('.open-btn')
const close_btn = document.querySelector('.close-btn')
const nav = document.querySelectorAll('.nav')

open_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.add('visible'))
})

close_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.remove('visible'))
})

明日任務

#10. Drag & Drop