Mengenal Sidebar pada Pagistrap

Sidebar atau Sidenav pada pagistrap ditandai dengan class .te-sidenav yang mana class ini memiliki child class bernama .te-sidenav-content yang berisi konten atau element berupa kumpulan menu-menu.

Class .te-sidenav memiliki sibling class bernama .te-out-sidenav yang mana didalam class ini berisi main content atau berbagai macam element selain sidenav, misal: header, main, article dan footer.

Dibawah ini contoh code yang sudah disederhanakan:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="https://tgh.my.id/pagistrap_assets/css/style.css">
    <title>Sidenav Close</title>
</head>

<body>

    <div class="te-sidenav">
        <div class="te-sidenav-content p-1 bg-info">
            <!-- start sidenav content -->
            Menu menu disini
            <!-- end sidenav content -->
        </div>
    </div>

    <div class="te-out-sidenav bg-warning">
        <!-- start main content -->
        Header dan main Konten disini
        <div style="min-height:100vh">
        </div>
        <!-- end main content -->
    </div>

    <script src="https://tgh.my.id/pagistrap_assets/js/script.js"></script>
</body>

</html>

Hasilnya:

Secara default sidenav atau sidebar menampilkan tampilan mini sidebar pada tampilan tablet dan PC, serta sidenav tersembunyi pada tampilan mobile. Untuk mengubah prilaku ini, kita bisa menambahkan class .te-active pada element yang memiliki class .te-sidenav atau class .te-out-sidenav.

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="https://tgh.my.id/pagistrap_assets/css/style.css">
    <title>Sidenav Open</title>
</head>

<body>

    <div class="te-sidenav te-active">
        <div class="te-sidenav-content p-1 bg-info">
            <!-- start sidenav content -->
            Menu menu disini
            <!-- end sidenav content -->
        </div>
    </div>

    <div class="te-out-sidenav te-active bg-warning">
        <!-- start main content -->
        Header dan main Konten disini
        <div style="min-height:100vh">
        </div>
        <!-- end main content -->
    </div>

    <script src="https://tgh.my.id/pagistrap_assets/js/script.js"></script>
</body>

</html>

Hasilnya:

Selain itu pagistrap juga memiliki class .te-toggle-sidenav yang mana class ini bisa ditempatkan pada tag <a> atau pada tag <button> untuk membuat tombol toggle yang berfungsi untuk membuka dan menutup sidenav atau sidebar.

<button type="button" class="btn btn-secondary te-toggle-sidenav">Toggle</button>

JS pada Sidebar Template Pagistrap

Selain class yang sudah disebutkan diatas, Pagistrap juga menyediakan beberapa fungsi JS diantaranya:

teSidenav.isShow()

Yang berfungsi untuk menampilkan status sidenav, fungsi ini mengembalikan nilai true jika sidenav dalam keadaan aktif atau terbuka dan mengembalikan nilai false jika sidenav dalam keadaan tertutup atau mini atau tidak aktif.

Fungsi lain yang tersedia adalah teSidenav.toggle() yang mana fungsi ini jika dipanggil akan melakukan perubahan kondisi pada sidenav. Jika sidenav dalam kondisi terbuka lalu fungsi ini dipanggil maka sidenav akan tertutup. Sebaliknya jika sidenav dalam keadaan tertutup dan fungsi ini dipanggil, maka sidenav akan terbuka.

Selain itu sidenav juga memiliki event show.te.sidenav jika sidenav diaktifkan dan event hide.te.sidenav jika sidenav dinonaktifkan.

//contoh eventListener
document.addEventListener('show.te.sidenav', function (e) {
    console.log('show', e)
});
document.addEventListener('hide.te.sidenav', function (e) {
    console.log('hide', e)
});