整個畫面中最先看到的是 header 的 nav bar ，就讓我們從這裡開始刻吧！

首先在 App.js 中放入 html 的內容，並且加上相應的 class 待會去做設定 style。

import "../src/assets/sass/main.sass";

function App() {
  return (
    <div className="container">
      <nav className="header">
        <div className="top">
          <label className="logo">VOGUE</label>
          <label className="menu">
            <label className="menu-item">
              <div className="dropdown">
                <a href="/" className="select">
                  taiwan
                </a>
              </div>
              <a href="/">membership</a> ---
            </label>
          </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>
    </div>
  );
}

export default App;

1. 直接使用字型設定去做 logo，就不另外做圖了 因為我懶得做圖
2. 先把內容的位置擺放好，再來慢慢調整樣式

_header.sass

接著我們來新增 _header.sass 這個 partial ，並且將它引入在 main.sass 中。

sass 中的階層，從最大的 class → header 來開始做 style 的設定，依照 VOGUE 官網的樣式去模仿，整個 header 底下會有 一個 box shadow，而這個屬性就可以在 header 整個區塊上去做設定了，依樣畫葫蘆的去把剩下的內容設定完，而 padding 以及 margin 的部分則是先抓個大概值。

可以看到我的其他 class 設定是在 header 底下的，這麼做可以避免去渲染到其他相同名稱的 class ，因為目前的設定只有在 header 下的 class 名稱或是 tag 才會生效。

.header
    box-shadow: -2px 2px 5px #0000001a
    border-top: 12px solid $primary-color
    .top
        padding: 24px
    .logo
        font-size: 100px
        font-family: $logo-font
    .menu
        padding: 16px
        position: absolute
        right: 0px

    .dropdown
        position: relative
        display: inline-block

    .sub-menu
        border-top: 1px solid #caccce
        padding: 20px
        a
            letter-spacing: 0.2em
            padding: 8px
            font-size: 12px
            font-weight: 900

1. top 的部分是 logo 和 membership 的區域，為了跟 breadcrumb 分開而設
2. menu 區域包含國家選擇以及 membership 以及選單 hamberger
3. dropdown list style 之後設定，這邊先給他他一個 inline-block 乖乖排隊
4. sub-menu 的部分則是設定如 VOGUE 官方的風格，拉開字距以及加粗字型，上方加上 border 以做區隔

今天就先把基本的內容擺好，接下來會來針對每個細項去做 style 的調整，感謝今天的收看～

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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