接下來要完成的是打開 menu 內容的 hamberger，就是『 三 』這個符號，之前的 fontawesome 中我們已經將 icon 加入了，現在要來調整他的樣式，順便將 top 中的三個 item 加上分隔線

icon 的樣式比較肥短，vogue 的則是比較扁寬一些

Transform

transform 的設定多樣，可以讓你針對物件去做變形，MDN 也有列出變形的樣式例子，可以去玩玩看～

transform - CSS | MDN

Scale

在 transform 中的其中一種變化設定值—— scale，則可與用作修改元素的大小，並且針對特定方向做縮放，我們就是利用上下縮小，左右拉寬的方式做縮放，來製造扁長的 icon-menu

scale( x 軸, y 軸)，transform: scale(2, 0.5) 也可以寫成 scaleX(2) scaleY(0.5)

了解了 transform 以及 scale ，接著在 menu-item 底下新增一個 icon-menu 的 class，並且用 transform scale 來變形 icon

// _header.sass
    
.header
    box-shadow: -2px 2px 5px #0000001a
    // ...

    .menu
        padding: 8px
        position: absolute
        right: 0px

        .menu-item
            position: relative
            display: inline-block
            padding: 12px 8px

            .icon-menu
                transform: scale(1.5,1)

在 Header.js 中套用 class

// Header.js

<div className="menu-item">
    <a href="/">
      <FontAwesomeIcon className="icon-menu" icon={faBars} size="lg" />
    </a>
  </div>

這樣 menu 上的 hamberger 就設定完成了，接著我們來補上物件之間的 divider

在 header 底下加入 vl class，設定 border 中的粗細，以及顏色，並且設定為垂直置中對齊文字

// _header.sass

.header
    // ...

    .vl
        border-left: 0.5px solid #b6b6b6
        height: 30px
        display: inline-block
        vertical-align: middle
        margin: 16px

加入在 Header.js 中，區分開 menu-item 的項目，就完成囉！

// Header.js

<div className="vl"></div>
<div className="menu-item">
  <a href="/">membership</a>
</div>
<div className="vl"></div>
<div className="menu-item">
  <a href="/">
    <FontAwesomeIcon className="icon-menu" icon={faBars} size="lg" />
  </a>
</div>

好的，大啊明天見！

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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