style: slicing page dashboard, sidebar, navbar
parent
a996bdf837
commit
1fd4a7e6b1
|
|
@ -0,0 +1,17 @@
|
||||||
|
using Microsoft.AspNetCore.Mvc;
|
||||||
|
|
||||||
|
namespace BpsRw.Controllers
|
||||||
|
{
|
||||||
|
public class DashboardController : Controller
|
||||||
|
{
|
||||||
|
public IActionResult Index()
|
||||||
|
{
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
|
||||||
|
public IActionResult Reports()
|
||||||
|
{
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
@{
|
||||||
|
Layout = "_LayoutApp";
|
||||||
|
ViewData["Title"] = "Dashboard";
|
||||||
|
}
|
||||||
|
|
@ -57,9 +57,9 @@
|
||||||
|
|
||||||
<!-- Login Button -->
|
<!-- Login Button -->
|
||||||
<div class="flex-1 flex justify-end items-center gap-4">
|
<div class="flex-1 flex justify-end items-center gap-4">
|
||||||
<button class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors">
|
<a href="@Url.Action("Index", "Dashboard")" class="btn btn-success rounded-full shadow-none bg-bpsrw-500 border-0">
|
||||||
<span class="text-white text-base font-semibold font-jakarta leading-normal">Login</span>
|
<span class="text-white text-base font-semibold font-jakarta leading-normal">Login</span>
|
||||||
</button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Menu Button -->
|
<!-- Mobile Menu Button -->
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" data-theme="light">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>@ViewData["Title"] - BPS RW</title>
|
||||||
|
|
||||||
|
<!-- Meta tags untuk SEO -->
|
||||||
|
<meta name="description" content="Aplikasi Bank Sampah Digital untuk mengelola sampah dan mendapatkan reward">
|
||||||
|
<meta name="keywords" content="bank sampah, recycle, environment, go green, sampah">
|
||||||
|
<meta name="author" content="Bank Sampah Digital">
|
||||||
|
|
||||||
|
<!-- Open Graph Meta Tags -->
|
||||||
|
<meta property="og:title" content="@ViewData[" Title"] - Bank Sampah Digital">
|
||||||
|
<meta property="og:description" content="Kelola sampah Anda dengan mudah dan dapatkan reward!">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
|
||||||
|
rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Phosphor Icons -->
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@2.1.2/src/regular/style.css" />
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@2.1.2/src/fill/style.css" />
|
||||||
|
|
||||||
|
<!-- Material Icon -->
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CSS -->
|
||||||
|
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-gray-100 min-h-dvh font-sans antialiased">
|
||||||
|
<div class="drawer md:drawer-open">
|
||||||
|
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
|
||||||
|
<div class="drawer-content">
|
||||||
|
@await Html.PartialAsync("_Navbar")
|
||||||
|
<!-- Page content here -->
|
||||||
|
<main class="container mx-auto p-6">
|
||||||
|
@RenderBody()
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<div class="drawer-side z-50 lg:z-0">
|
||||||
|
@await Html.PartialAsync("_Sidebar")
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||||
|
@await RenderSectionAsync("Scripts", required: false)
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<div class="navbar sticky top-0 z-20 w-full justify-between bg-base-100 lg:justify-end">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<label for="my-drawer-2" class="btn bg-bpsrw-500 text-white drawer-button btn-square lg:hidden">
|
||||||
|
<span class="icon icon-outline">menu_open</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-end gap-4">
|
||||||
|
<label class="input rounded-full bg-gray-100">
|
||||||
|
<span class="icon icon-outline text-gray-400">search</span>
|
||||||
|
<input type="search" required placeholder="Cari berkas atau data..." />
|
||||||
|
</label>
|
||||||
|
<button class="btn btn-ghost btn-square border-gray-200 rounded-lg">
|
||||||
|
<span class="icon icon-outline">help</span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-ghost btn-square border-gray-200 rounded-lg avatar avatar-online">
|
||||||
|
<span class="icon icon-outline">notifications</span>
|
||||||
|
</button>
|
||||||
|
<div class="divider divider-horizontal m-0"></div>
|
||||||
|
<div class="dropdown dropdown-end">
|
||||||
|
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar border-2 border-bpsrw-500">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img alt="Avatar"
|
||||||
|
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
|
||||||
|
<li><a>Profile</a></li>
|
||||||
|
<li><a>Settings</a></li>
|
||||||
|
<li><a href="@Url.Action("Index", "Home")">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
<label class="drawer-overlay" for="my-drawer-2" aria-label="close sidebar"></label>
|
||||||
|
|
||||||
|
<aside class="min-h-screen bg-base-100 border-e border-gray-200">
|
||||||
|
<!-- Navbar -->
|
||||||
|
<div
|
||||||
|
class="navbar sticky top-0 hidden border-b border-gray-200 items-center justify-center gap-2 bg-profiling-500 px-4 py-2 font-bold lg:z-50 lg:flex">
|
||||||
|
<img src="/images/logo.png" alt="Logo" width="48" />
|
||||||
|
<span>BPS RW</span>
|
||||||
|
</div>
|
||||||
|
<ul class="menu menu-sidebar bg-base-100 text-base-content min-h-full w-80 p-4">
|
||||||
|
<!-- Sidebar content here -->
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500 menu-active">
|
||||||
|
<span class="icon icon-fill">analytics</span>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<details open>
|
||||||
|
<summary class="text-bpsrw-500 font-semibold">DATA SUDIN</summary>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">house</span>
|
||||||
|
Rumah Memilah
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">playlist_add_check</span>
|
||||||
|
Checklist Harian
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<details open>
|
||||||
|
<summary class="text-bpsrw-500 font-semibold">DATA KECAMATAN</summary>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">list</span>
|
||||||
|
Data Kecamatan
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">house</span>
|
||||||
|
Rumah Memilah
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">playlist_add_check</span>
|
||||||
|
Checklist Harian
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">list</span>
|
||||||
|
Data RW
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">list</span>
|
||||||
|
Data RT
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<details open>
|
||||||
|
<summary class="text-bpsrw-500 font-semibold">DATA RUMAH</summary>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">house</span>
|
||||||
|
Rumah
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">playlist_add_check</span>
|
||||||
|
Potensi Rumah
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">list</span>
|
||||||
|
Data Bank Sampah
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">list</span>
|
||||||
|
Data Pendamping RW
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">list</span>
|
||||||
|
Data Berat Sampah
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<details open>
|
||||||
|
<summary class="text-bpsrw-500 font-semibold">DATA VERIFIKASI</summary>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">house</span>
|
||||||
|
Laporan RW
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">playlist_add_check</span>
|
||||||
|
Checklist Harian
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-gray-500">
|
||||||
|
<span class="icon icon-fill">playlist_add_check</span>
|
||||||
|
Total Checklist Rumah
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
Loading…
Reference in New Issue