DAY 22 制作 Nav Bar - Hamburger

接下来要完成的是打开 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 - 前端？後端？你早晚都要全端的，何不从现在开始？