MIF_E31220480/resources/views/layouts/app.blade.php

150 lines
5.3 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<style>
body {
display: flex;
}
.sidebar {
width: 250px;
min-height: 100vh;
padding: 40px 20px;
/* Menyesuaikan padding */
color: white;
background: linear-gradient(to bottom,
rgba(42, 103, 159, 0.84),
rgba(50, 148, 221, 0.88),
rgba(28, 103, 177, 0.90),
rgba(4, 32, 75, 0.92));
}
.sidebar .logo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
/* Jarak antara gambar dan teks */
margin-bottom: 30px;
}
.sidebar .logo img {
width: 80px;
/* Sesuaikan ukuran gambar */
height: 50px;
}
.sidebar h4 {
font-size: 22px;
font-weight: bold;
margin-bottom: 0px;
/* Jarak bawah agar lebih proporsional */
text-align: center;
}
.nav-link {
color: white !important;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
display: flex;
align-items: center;
gap: 20px;
/* Menambahkan jarak antara ikon dan teks */
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.2);
}
.nav-item {
margin-bottom: 15px;
/* Memberikan jarak antar menu */
}
.content {
flex: 1;
padding: 80px 40px 40px;
/* Menambahkan padding-top agar tidak tertutup */
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark px-3 d-flex justify-content-between"
style="position: absolute; top: 0; left: 250px; width: calc(100% - 250px); height: 60px; background: linear-gradient(to right, rgba(42, 103, 159, 0.84), rgba(50, 148, 221, 0.88)); z-index: 999;">
<div class="ms-auto">
<!-- Dropdown Menu for Profile and Logout -->
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user-circle"></i> Menu
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="{{ route('admin.profil') }}">
<i class="fas fa-user-circle"></i> Profil
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<form action="{{ route('logout') }}" method="POST" style="display: inline;">
@csrf
<button type="submit" class="dropdown-item">
<i class="fas fa-sign-out-alt"></i> Logout
</button>
</form>
</li>
</ul>
</div>
</div>
</nav>
<div class="sidebar">
<div class="logo">
<img src="{{ asset('assets/admin/icon.png') }}" alt="Logo">
<h4>Kos Calista</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a href="{{ route('admin.dashboard') }}" class="nav-link"><i class="bi bi-speedometer2"></i><span>Dashboard</span></a>
</li>
<li class="nav-item">
<a href="{{ route('admin.customer') }}" class="nav-link"><i class="bi bi-people"></i><span>Data Customer</span></a>
</li>
<li class="nav-item">
<a href="{{ route('admin.rooms') }}" class="nav-link"><i class="bi bi-door-closed"></i><span>Data Kamar</span></a>
</li>
<li class="nav-item">
<a href="{{ route('admin.booking') }}" class="nav-link"><i class="bi bi-calendar-check"></i><span>Data Booking</span></a>
</li>
<li class="nav-item">
<a href="{{ route('admin.transaksi') }}" class="nav-link"><i class="bi bi-cash-stack"></i><span>Data Transaksi</span></a>
</li>
<li class="nav-item">
<a href="{{ route('admin.expense') }}" class="nav-link"><i class="bi bi-wallet2"></i><span>Pengeluaran</span></a>
</li>
<li class="nav-item">
<a href="{{ route('admin.keuangan') }}" class="nav-link"><i class="bi bi-credit-card"></i><span>Laporan Keuangan</span></a>
</li>
</ul>
</div>
<div class="content">
@yield('content')
</div>
<!-- Bootstrap JavaScript Bundle (termasuk Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</body>
</html>