Sidebar

Dasar

Membuat Sidebar kamu perlu tag <aside> dengan class .sidebar, lalu didalam tag <aside> buat element menggunakan tag <ul> dengan class .sidebar__nav, didalam tag <ul> buat element menggunakan tag <li> dengan class .sidebar__item sebagai item-item dari sidebarnya, didalam tag <li> buat element menggunakan tag <a> dan didalam tag <a> kamu bisa meletakkan text ataupun icon. Untuk membuat penanda bahwa Sidebar Item itu sedang aktif, kamu bisa menambahkan class .sidebar__item--active setelah class .sidebar__item.

CopyHTML
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item sidebar__item--active">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-envelope"></span> Pesan</a>
        </li>
    </ul>
</aside>

Header

Membuat Header pada sidebar, kamu perlu menambahkan class .sidebar__item--header setelah class .sidebar__item.

CopyHTML
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item sidebar__item--header">Dashboard</li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>

        <li class="sidebar__item sidebar__item--header mt-3">Konten</li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-file-text"></span> Artikel</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-video-camera"></span> Video</a>
        </li>
    </ul>
</aside>

Dropdown

Membuat Dropdown, kamu perlu menambahkan class .sidebar__btn-dropdown. Kemudian dibawah tag <a> buat element menggunakan tag <ul> dengan class .sidebar__dropdown, didalamnya buat element menggunakan tag <li> dengan class .sidebar__dropdown-item, lalu didalam tag <li> buat element menggunakan tag <a>, dan kamu bisa memasukkan text ataupun icon didalamnya. Untuk membuat penanda bahwa Sidebar Dropdown Item itu sedang aktif kamu bisa menambahkan class .sidebar__dropdown-item--active setelah class .sidebar__dropdown-item.

Dropdown standar-nya disembunyikan. Tapi jika kamu ingin standar Dropdown ditampilkan, kamu perlu menambahkan class .sidebar__item--dropdown-active setelah class .sidebar__item, sebagai penanda bahwa dropdown sedang aktif. Kemudian tambahkan class .sidebar__dropdown--show setelah class .sidebar__dropdown, untuk mengubah standar sidebar dropdown menjadi ditampilkan.

CopyHTML
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item sidebar__item--header">Dashboard</li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>

        <li class="sidebar__item sidebar__item--header mt-3">Konten</li>
        <li class="sidebar__item sidebar__item--dropdown-active">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-file-text"></span> Artikel
            </a>
            <ul class="sidebar__dropdown sidebar__dropdown--show">
                <li class="sidebar__dropdown-item sidebar__dropdown-item--active"><a href="#">HTML</a></li>
                <li class="sidebar__dropdown-item"><a href="#">CSS</a></li>
            </ul>
        </li>
        <li class="sidebar__item">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-video-camera"></span> Video
            </a>
            <ul class="sidebar__dropdown">
                <li class="sidebar__dropdown-item"><a href="#">PHP</a></li>
                <li class="sidebar__dropdown-item"><a href="#">Javascript</a></li>
            </ul>
        </li>
    </ul>
</aside>

Toggler

Standarnya sidebar akan disembunyikan jika lebar viewport lebih kecil sama dengan 767.98px. Membuat Toggler kamu perlu membuat element menggunakan tag <a> dengan class .navbar__sidebar-toggler, lalu didalamnya buat element menggunakan tag <span> dengan class .fa.fa-bars, dan letakkan sebelum code untuk Navbar Brand.

CopyHTML
<!-- navbar -->
<nav class="navbar justify-content-start navbar--white">
    <!-- sidebar toggler -->
    <a class="navbar__sidebar-toggler" href="#"><span class="fa fa-bars"></span></a>
    <!-- sidebar toggler -->
    <a class="navbar-brand ml-3" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
</nav>
<!-- sidebar -->
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item sidebar__item--header">Dashboard</li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>

        <li class="sidebar__item sidebar__item--header mt-3">Konten</li>
        <li class="sidebar__item sidebar__item--dropdown-active">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-file-text"></span> Artikel
            </a>
            <ul class="sidebar__dropdown sidebar__dropdown--show">
                <li class="sidebar__dropdown-item sidebar__dropdown-item--active"><a href="#">HTML</a></li>
                <li class="sidebar__dropdown-item"><a href="#">CSS</a></li>
            </ul>
        </li>
        <li class="sidebar__item">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-video-camera"></span> Video
            </a>
            <ul class="sidebar__dropdown">
                <li class="sidebar__dropdown-item"><a href="#">PHP</a></li>
                <li class="sidebar__dropdown-item"><a href="#">Javascript</a></li>
            </ul>
        </li>
    </ul>
</aside>