接著我們要做的是打開 menu hamberger 後的 full screen modal，裡面包含了所有 VOGUE links

Modal

首先我們再新增一個 modal 的 partial，抽離出來管理這個物件的 style，並且在 Header.js 中加入相關的 div 以及 class

// main.sass

@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"
@import "modal"

打開的方式跟之前的 dropdown 一樣，只在於這次有開關的按鈕區別，所以會有參數帶入控制開關

// Header.js

export default function Header() {
	// ...
  const [modalOpen, setModalOpen] = React.useState(false);
  const handleModalClick = (status) => {
    setModalOpen(status);
  };

  return (
    <nav className="header">
      // ...
      <div className={modalOpen === true ? "modal show" : "modal"}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <div className="modal-title">VOGUE</div>
              <label
                className="close-button"
                onClick={() => handleModalClick(false)}
              >
              </label>
            </div>
            <div className="modal-body">
              <p>Modal body text goes here.</p>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

在 sass 的部分加上 modal 以及 show 來控制顯示的開關，以及移動到 modal-button 上的 hover style

// _modal.sass

.modal
    position: fixed
    top: 0
    left: 0
    display: none
    width: 100%
    height: 100%
    background-color: $primary-color
    color: $primary-background-color

.modal-button:hover
    @extend %hover-style

.show
    display: block

接下來利用 fontawesome 中的 close 來當作關閉按鈕

// Header.js

<div className="modal-header">
  <div className="modal-title">VOGUE</div>
  <label
    className="close-button"
    onClick={() => handleModalClick(false)}
  >
    <FontAwesomeIcon icon={faTimes} size="3x" />
  </label>
</div>

sass 的部分針對 button 調整位置

// _modal.sass

.modal-header
  .close-button
      margin: 8px
      padding: 16px
      position: fixed
      top: 0
      right: 0
      cursor: pointer

接下來看看畫面

可以看到 logo、menu 的位置是有對齊的！

接著要完成的是 Modal 中的 Content 部分，裡面包含了去各頁的連結 link

小提醒！可以先把 const [modalOpen, setModalOpen] = React.useState(true); 設定為 true，這樣比較方便檢視 modal 的效果，不然每次重新 render 還要打開來太麻煩了ＸＤ

因為 content 中有三個欄位，所以我們要再另外設置一個 modal column 來分裝這三個欄位

.modal-column
    vertical-align: top
    border-top: 1.5px solid $primary-background-color
    width: 29vw
    display: inline-block
    margin: 16px

大概調整一下跟官網的配置一樣，這邊要注意的是：

1. vertical-align: top - 讓 column 們是靠上對齊的
2. width: 29vw - vw 是指當前畫面的寬度，而29就是畫面寬度的29%，針對三欄簡易的用這樣去分配寬度
3. display: inline-block - 讓 column 們可以並肩並行！

再來針對 column 中的內容個別去設定 style

.modal-column
    // ...
    a
        padding: 16px 0
        display: block
        color: $primary-background-color
        &:hover
            color: $secondary-color

    hr
        border: none
        height: 1px
        color: $darker-gray
        background-color: $darker-gray

    .logo-font
        font-family: $logo-font
        font-size: 48px
        font-weight: 300
        text-transform: capitalize

1. a - 因為自行預設是黑色，所以我們要針對 modal 下的 a 在另外進行樣式設定，包含 hover 時的顏色，也可以順便設定 padding 讓排版看起來更整齊
2. hr - 官方是使用 ul li 的方式來做分隔線，但我覺得有點麻煩，所以直接使用 hr 來做分隔
3. .logo-font - 這個部分是，中間那組 column 的字型是使用 logo 的字型，針對這部分也個別做 class 去設定

接下來是 js 的部分，因為 secondary menu 的部分被重複使用了，為了方便我將它做成 array 的形式來使用，而右側其他資訊 info 的地方也一併使用 array 的形式作儲存，方便我們後續帶出資料

const secondaryMenu = [
    "fashion",
    "beauty",
    "entertainment",
    "lifestyle",
    "luxury",
    "video",
    "Vogue有意識",
  ];

const info = [
    "秀場圖輯 RUNWAY SHOW",
    "可能研究所",
    "美人會部落格",
    "風格達人",
    "評美時尚客",
    "活動快報",
  ];

而 render 出的方式使用前面使用過的 map，整個 modal 的內容目前會如下

<div className={modalOpen === true ? "modal show" : "modal"}>
    <div className="modal-dialog">
      <div className="modal-content">
        <div className="modal-header">
          <div className="modal-title">VOGUE</div>
          <label
            className="close-button"
            onClick={() => handleModalClick(false)}
          >
            <FontAwesomeIcon icon={faTimes} size="3x" />
          </label>
        </div>
        <div className="modal-body">
          <div className="modal-column">
            <a href="/">membership</a>
            <hr />
            <a href="/">vogue shop</a>
          </div>
          <div className="modal-column">
            {secondaryMenu.map(function (item) {
              return (
                <div>
                  <a className="logo-font" href="/">
                    {item}
                  </a>
                  <hr />
                </div>
              );
            })}
          </div>
          <div className="modal-column">
            {info.map(function (item) {
              return (
                <div>
                  <a href="/">{item}</a>
                  <hr />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  </div>

前面有設定的 logo-font 樣式使用 class 的方式套用上去了，大功告成！

今天就先到這邊，大家掰掰～～～

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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