Assalaamu'alaikum wa rahmatullahi wa barakaatuh. Hello gaes, disini saya ingin share singkat bagaimana cara membuat layout dashboard admin yang biasa saya gunakan, jika ada masukan atau saran nya boleh sharing dibawah ya :D
Oke kita langsung saja buat, disini saya menggunakan laravel 11 sebagai base on project nya. Pertama kita buat folder terpisah untuk layout nya, karena disini saya menggunakan laravel yang dimana nantinya isi dari dashboard dan yang lainnya akan dibuat terpisah.
Disini saya juga menggunakan tailwind untuk css nya (*isi dalam class bersifat opsional jika tidak disebutkan dalam tulisan ini) dan beberapa komponen yang disediakan oleh flowbite. Saya akan membuat layout dashbord dengan sidebar yang bisa push konten didalamnya dengan menggunakan sedikit javascript native, saya menggunakan contoh dari w3school dan referensi dari flowbite
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.css"
rel="stylesheet" />
<title>Document</title>
</head>
Pertama saya membuat sebuah div untuk pembungkus keseluruhannya dengan menambahkan relative untuk membuat sidebar akan tetap diam tidak mengikuti scroll dari isi konten
<div class="relative bg-gray-50 w-full">
</div>
Dalam isi div saya membagi 2 kolom untuk sidebar dan isi dari konten nya, pada bagian sidebar saya beri fixed agar tidak mengikuti scroll dari isi konten dan saya tambah id "sideBar" untuk membuat sidebar push. Untuk kolom yang satunya adalah isi dari kontennya dengan menambahkan class relative untuk navbar dan id "main" untuk membantu agar bisa sidebar push
<div id="sideBar" class="fixed bg-slate-200 w-72 h-screen mx-4 mt-4 p-5
pb-72 rounded-2xl">
</div>
<div id="main" class="relative ml-80 bg-transparent">
Pada div sidebar, saya membagi menjadi 2 yaitu bagian atas untuk tombol close sidebar dengan fungsi onclick untuk bisa hide sidebar dan bagian bawah untuk isi dari sidebar nya dengan menggunakan class h-screen dan overflow-y-scroll untuk scroll sidebar jika isi dari sidebar lebih dari layar, lalu saya juga menggunakan class .no-scrollbar untuk menghilangkan tampilan scoll pada bagian sampingnya (*tambahkan style terlebih dahulu jika ingin mengunakan class ini)
<div id="sideBar" class="fixed bg-slate-200 w-72 h-screen mx-4 mt-4 p-5
pb-72 rounded-2xl">
<div class="flex justify-between">
<button onclick="closeNav()" type="button" class="items-center p-2
my-2 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100
focus:outline-none focus:ring-2 focus:ring-gray-200">
<svg class="w-[24px] h-[24px] text-gray-800" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
</svg>
</button>
</div>
<div class= "h-screen overflow-y-scroll no-scrollbar">
<ul class="space-y-2 text-md font-medium">
<li>
<a href="" class="flex items-center p-2 text-gray-500
hover:text-green-600 rounded-lg hover:bg-gray-100 group">
<svg class="w-5 h-5 text-gray-500 transition duration-75
group-hover:text-green-600" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 22 21">
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998
8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0
0 11 1.02V10h8.975a1 1 0 0 0
1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0
12.5 0Z"/>
</svg>
<span class="ms-3">Dashboard</span>
</a>
</li>
</ul>
</div>
</div>
<style>
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
Pada div main, disini saya membuat nav untuk dashboard. Sama seperti sebelumnya, saya gunakan fixed untuk membuat navbar nya fix ada diatas walaupun kita scroll konten nya. Pada navbar, saya membuat tombol untuk menampilkan sidebar jika sidebarnya close dengan menambahakan fungsi onclick, lalu saya menambahkan beberapa item, salah satunya saya menambahkan komponen login indikator dengan menggunakan class animasi bawaan tailwind
<div id="main" class="relative ml-80 bg-transparent">
<div id="navBar" class="fixed bg-slate-50 w-[calc(100%-20rem)] h-20
flex content-center justify-between">
<div class="flex items-center">
<button id="iconNavOpen" onclick="openNav()" type="button"
class="hidden items-center p-2 my-2 ms-3 text-sm text-gray-500
rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2
focus:ring-gray-200">
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" fill-rule="evenodd" d="M2
4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0
012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010
1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0
01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
</svg>
</button>
<p class="font-bold text-lg text-gray-500 pl-5">Dashboard</p>
</div>
<div class="flex items-center">
<div class="flex items-center ms-3">
<div class="pr-5">
<div class="flex text-sm items-center" aria-expanded="false"
data-dropdown-toggle="dropdown-user">
<img class="w-8 h-8 rounded-full mr-2"
src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
alt="user photo">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full
w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full
h-3 w-3 bg-green-500"></span>
</span>
<div class="px-4 py-3 text-left ">
<p class="text-sm text-gray-500">
Neil Sims
</p>
<p class="text-sm font-medium text-gray-500 truncate">
neil.sims@flowbite.com
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-transparent pt-20">
<div id="konten" class="pr-4 h-screen rounded-lg">
<p>KONTEN</p>
</div>
</div>
</div>
Terakhir saya tambahkan script untuk fungsi sebelumnya yaitu openNav dan closeNav dengan memanggil id yang telah kita buat dengan beberapa penyesuaian
<script>
function openNav() {
document.getElementById("sideBar").style.display = "block";
document.getElementById("iconNavOpen").style.display = "none";
document.getElementById("main").style.marginLeft = "20rem";
document.getElementById("navBar").style.width = "calc(100% - 20rem)";
document.getElementById("konten").style.marginLeft = "0px";
}
function closeNav() {
document.getElementById("sideBar").style.display = "none";
document.getElementById("main").style.marginLeft = "0";
document.getElementById("navBar").style.width = "100%";
document.getElementById("iconNavOpen").style.display = "block";
document.getElementById("konten").style.marginLeft = "20px";
}
</script>
Selesai.
Dengan beberapa penyesuaian yang ada, kalian bisa menambahkan sesuai keinginan anda untuk membuat layout dashboard yang kalian inginkan
Sekian dari saya bagaimana cara membuat layout sidebar push, Wassalaamualaikum wa rahmatullahi wa barakaatuh.
Komentar
Posting Komentar