Card image cap
[Website Design][3] Sidebar Bootstrap 4
Tuesday, 02 Jul 2019

Hello world,

Sidebar banyak sekali digunakan dalam membuat sebuah website. Kebanyakan sidebar digunakan untuk halaman administrator dimana kalau kita cari template admin maka paling banyak menggunakan sidebar sebagai navigasi. Pada post kali ini saya membuat sebuah sidebar yang saya custom dari navbar standar dari bootstrap 4. Untuk kode awal navbar bootstrap 4 bisa dilihat di sini. Untuk membuat sidebar biasanya beberapa developer membuat versi kode html secara custom dan ditambah css yang mereka buat custom juga. Nah di sini saya membuat kode htmlnya masih sama persis atau masih mempertahankan struktur kode html dari navbar bootstrap 4 dari web resminya. Selain akan lebih mudah karena hanya tinggal mengubah kode css-nya, kita tidak perlu memikirkan struktur html seperti apa yang bagus atau rapih. 

Selanjutnya di bawah ini kode css yang saya buat custom. Kode ini masih terus saya kembangkan tetapi untuk sekarang ini sudah bisa digunakan dengan versi saat ini.

    .navbar-collapse {
        background: #f5f5f5;
        position: absolute;
        top: 54px;
        left: -300px;
        padding-bottom: 15px;
        width: 300px;
        height: calc(100vh - 54px) !important;
        transition: all 0.3s ease;
        display: block;
        overflow-y: scroll
    }
    .navbar-collapse.collapsing {
        transition: none;
        display: none;
    }
    .navbar-collapse.show {
        left: 0;
    }

    .navbar-nav{
        padding: 0;
    }

    .nav-item a{
        border-bottom: 1px solid #cccccc;
        background: #f5f5f5;
        padding: 15px !important;
    }

    .nav-item a:hover{
        background: #cccccc;
        color: #ffffff !important
    }

    #content{
        margin-top: 50px;
        margin-left: 300px;
        transition: all 0.3s ease;
        padding: 15px
    }

    .dropdown-menu{
        background: none;
        border: none
    }
    .dropdown-menu a{
        border: none
    }

    @media (max-width: 700px) {
        #content{
            margin-left: 0;
        }
    }

Selain itu saya juga menambahkan perubahan pada javascript. Kode javascript di sini saya pakai untuk mengubah event pada navbar-toggler agar lebih responsive.

    function myFunction(x) {
        var element = document.getElementById("navbarCollapse");

        if (x.matches) { // If media query matches
            element.classList.remove("show");
        } else {
            element.classList.add("show");
            $('#navbarCollapse').on('hidden.bs.collapse', function () {
                // do something…
                $('#content').css('margin-left', '0');
            });
            $('#navbarCollapse').on('show.bs.collapse', function () {
                // do something…
                $('#content').css('margin-left', '300px');
            });
        }
    }

    var x = window.matchMedia("(max-width: 700px)")
    myFunction(x) // Call listener function at run time
    x.addListener(myFunction);

Setelah menambahan kode di atas silakan coba dijalankan di browser.

Full code-nya akan menjadi seperti berikut:


Selamat mencoba :)