這次要寫一個播放器的清單，在編寫之前，我先把 navbar 優化了一下，如下圖呈現的樣式，

但我還是沒有研究出來 search 要怎麼對齊在 navbar 的中間，如果有大大知道，還請多指教！
navbar 優化就不再這邊贅述，不過這邊有用一個小技巧，就是 position:fixed，想知道原理可以看 W3school 說明，為了讓之後使用播放器頁面時，可以隨時使用 navbar 的功能，就不用一直拖曳頁面喔!!

回歸正題，這次要寫的 aside 側邊欄位，總共會分為上中下層來編寫，
最上面是基本功能，中間會是收藏的歌曲或專輯清單，最下面則是現在正在播放的曲子。

這次我們就先來寫最上面的 aside 的基本功能區塊吧!
要呈現的樣式如下

HTML如下

 <div class="content">
        <div class="container">
            <div class="container-left">
                <h2>線上聽</h2>
                <ul class="member-menu">
                    <li><a href="#"><i class="fab fa-searchengin"></i>發現朋友</a></li>
                    <li><a href="#"><i class="far fa-play-circle"></i>糾來一起聽</a></li>
                    <li><a href="#"><i class="fas fa-tv"></i>頻道</a></li>
                    <li><a href="#"><i class="fas fa-broadcast-tower"></i>廣播</a></li>
                    <div class="line"></div>
                    <div class="clearfix"></div>
                </ul>
            </div>
            <div class="container-right"></div>
            這排是到時候右邊頁面內容要使用的區塊
        </div>

HTML 沒有什麼太多特別的設定，也就是基本的 ul li 而已。

再來看一下 SCSS，

.content {
    padding-top: 70px;
    line-height: 1.5;
}
因為 navbar 有設定 position:fixed，所以 content 內容要使用 padding-top 向上推擠，才能夠避開 navbar
h2 {
    font-size: $font-l;
    font-family: 微軟正黑體;
    font-weight: bold;
    color: #6d6d6d;

}

.line {
    border-bottom: 1px solid #333;
    margin-top: 30px;
}

.member-menu {
    margin-top: 10px;
    .fa-searchengin,
    .fa-play-circle,    
    .fa-tv,
    .fa-broadcast-tower {
        left: 30px ;
        padding-right: 10px;
    }
    a{
        color:$lead-color;
    }
這邊有發現跟前面不一樣嗎? 因為我這邊並沒有要讓 ul li 併排，所以沒有寫 float:left，他就會呈現 display:block，占滿空間，就會變成這樣呈現喔!!
}

這裡面有些屬性前面有錢字號($)，這是預先寫好的變數，可以讓管理 CSS，也可加速寫網頁的速度喔!!
附上 codepen
https://codepen.io/hnzxewqw/pen/rNBrYae