針對 dropdown 的部分，我們要來細節微調他的 style ，讓他符合 vogue 上的設計，並且將 header 拉出來作為 component，讓 App.js 更乾淨整潔。

抽出 header 區域

首先新增一個資料夾在 src 底下，並命名為 components，在裡面新增 Header.js 這裡要注意 React 的命名規則為『開頭大寫駝峰式』，不然 eslint 會來找你麻煩：Ｄ

-src
|--components
|	|-- Header.js

並且把原本在 App.js 中 Header 的部分搬移到 Header.js 底下

// Header.js

import React from "react";

export default function Header() {
  
  return (
    <nav className="header">
      <div className="top">
        <label className="logo">VOGUE</label>
        <label className="menu">
          <div className="menu-item">
            <div className="dropdown">
              <label>
                <span>Taiwan</span>
              </label>
              <div className="dropdown-content">
                <ul>
                  <li>
                    <a href="/">arabia</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div className="menu-item">
            <a href="/">membership</a>
          </div>
          <div className="menu-item">
            <a href="/">
             ---
            </a>
          </div>
        </label>
      </div>
      <div className="sub-menu">
        <a href="/">FASHION</a>
        <a href="/">BEAUTY</a>
        <a href="/">ENTERTAINMENT</a>
        <a href="/">LIFESTYLE</a>
        <a href="/">LUXURY</a>
        <a href="/">VIDEO</a>
        <a href="/">VOGUE有意識</a>
      </div>
    </nav>
  );
}

之後在 App.js 中引入

// App.js

import "../src/assets/sass/main.sass";
import Header from "./components/Header";
function App() {
  return (
    <div className="container">
      <Header />
    </div>
  );
}

export default App;

接下來開始處理 dropdown 的樣式

dropdown

首先在 header 中先分別定義 dropdown 的 class

<div className="dropdown">
  <label className="dropdown-label">
    <span>Taiwan</span>
  </label>
  <div className="dropdown-content">
    <ul>
      <li>
        <a href="/">arabia</a>
      </li>
    </ul>
  </div>
</div>

在 sass 中定義符合 VOGUE 樣式的 dropdown

.dropdown
    position: relative
    display: inline-block

    &-content
        display: none
        position: absolute
        right: 10px
        min-width: 120px
        background-color: $primary-background-color
        box-shadow: 0px 8px 16px 0px $gray
        padding: 12px 16px
        z-index: 1

    &-label:hover
        color: $secondary-color
        cursor: pointer

    ul
        padding: 8px
        li
            list-style-type: none
            padding: 16px
            &:hover
                display: block
                color: $secondary-color

    .show
        display: block

使用 & 的方法帶入 nesting 上層的名稱，像是這裡帶入的是 dropdown，那下面的 class 就會去抓"dropdown-content"這個 class 的內容。

在 content 的部分可以看到 display: none，因為是要點擊之後才會打開 content，這裡我還設定了一個 show 的 class，就是用作等等顯示用的。

回到 Header.js ，我們先簡單寫一個小 func 來讓 label 可以做點擊並打開我們 dropdown-content

const [activeDropdown, setActiveIndex] = React.useState(false); 
// 使用 hooks 儲存並設定開啟關閉的狀態，預設 false 為關閉

const handleOnClick = () => {
  setActiveIndex(!activeDropdown); // 點擊時開關變換狀態
};

//設定國家
const location = [
  "arabia",
  "australia",
  "brasil",
  "britain",
  "china",
  "czechoslovakia",
];

然後在下方 html 的部分

<div className="dropdown">
  <label
    onClick={() => handleOnClick()} 
    className="dropdown-label"
  >
    <span>Taiwan</span>
  </label>
  <div
    className={
      activeDropdown === true
        ? "dropdown-content show"
        : "dropdown-content"
    }
  >
    <ul>
      {location.map(function (country) {
        return (
          <li>
            <a href="/">{country}</a>
          </li>
        );
      })}
    </ul>
  </div>
</div>

1. 在 label 中使用 onclick func 來呼叫我們上面寫好的方法，來開關整個 dropdown-content
2. 如果 activeDropdown 狀態是 true 就將 show 這個 class 加上 dropdown-content，若為 false 則不增加，來隱藏內容。這邊要注意的是 show 要放在後面，display 的屬性才不會被蓋掉
3. location 的部分用一個簡單的 map 把 array 中的內容 render 出來，讓我們不用一直寫重複的部分。

大概就是以上這樣啦！我們明天見！

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？