Membuat Side Nav Responsive dengan Bootstrap 4

Pada beberapa artikel sebelumnya saya sudah cukup banyak membahas tentang berbagai fitur yang ada pada bootstrap 4 yaitu salah satunya adalah artikel saya yang berjudul membuat dropdown menggunakan bootstrap 4,  jika kalian ingin melihatnya bisa masuk ke link kategoriseperti yang kita ketahui bahwa bootstrap adalah sebuah framework yang digunakan untuk membangun sebuah website responsive. Pada artikel ini kita akan sedikit melakukan eksperimen untuk membuat side nav responsive menggunakan bootstrap 4.

Caranya cukup mudah, pertama kita hubungkan beberapa file dari bootstrap dan font-awesome file ini ke dalam sebuah file html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Jika sudah, sekarang kita akan buat struktur untuk membuat side nav pada bootstrap 4 dengan kode dibawah ini

<div class="container-fluid">
    <div class="row">
        <div class="col-2 collapse d-md-flex bg-dark pt-2 h-100" id="sidebar">
            <ul class="nav flex-column flex-nowrap">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item">
                    <a class="nav-link " href="#submenu1" data-toggle="collapse" data-target="#submenu1">Materi <i class="fa fa-arrow-down" aria-hidden="true"></i></a>
                    <div class="collapse" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-2 nav">
                            <li class="nav-item"><a class="nav-link py-0" href="">Desain</a></li>
                            <li class="nav-item">
                                <a class="nav-link collapsed py-0" href="#submenu1sub1" data-toggle="collapse" data-target="#submenu1sub1">Website</a>
                                <div class="collapse small" id="submenu1sub1" aria-expanded="false">
                                    <ul class="flex-column nav pl-4">
                                        
                                        <li class="nav-item">
                                            <a class="nav-link p-0" href="">
                                                 HTML CSS
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-0" href="">
                                                 Javascript
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-0" href="">
                                                 PHP
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Alumni</a></li>
            </ul>
        </div>
        <div class="col pt-2">
            <h2>
                <a href="" data-target="#sidebar" data-toggle="collapse" class="d-md-none"><i class="fa fa-bars"></i></a>
                Content
            </h2>
            <h6 class="hidden-sm-down">..ISI KONTEN UTAMA..</p>
        </div>
    </div>
</div>

Selanjutnya kita juga akan berikan CSS untuk memberikan lebar dan tinggi halaman seperti dibawah ini

body, html {
    height: 100%;
}

#sidebar {
    min-width: 130px;
}

Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara membuat side nav menggunakan bootstrap 4, untuk lebih jelasnya bisa kalian lihat demo di bawah ini.