DAY 17 制作 Nav Bar - Header

整个画面中最先看到的是 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;

直接使用字型设定去做 logo，就不另外做图了 ~~因为我懒得做图~~
先把内容的位置摆放好，再来慢慢调整样式

_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