368 lines
9.3 KiB
PHP
368 lines
9.3 KiB
PHP
<!-- Left Panel -->
|
|
<nav class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="header-content">
|
|
<a href="/" class="sidebar-brand">SPK-P</a>
|
|
<button class="mobile-nav-toggle">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-body">
|
|
<ul class="nav">
|
|
@if (Auth::user()->role == 'admin')
|
|
<li class="{{ request()->routeIs('admin.dashboard-admin') ? 'active' : '' }}">
|
|
<a href="{{ route('admin.dashboard-admin') }}">
|
|
<i class="fa fa-dashboard"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li class="{{ request()->routeIs('datauser') ? 'active' : '' }}">
|
|
<a href="{{ route('datauser') }}">
|
|
<i class="fa fa-users"></i>
|
|
<span>Manajemen User</span>
|
|
</a>
|
|
</li>
|
|
<li class="{{ request()->is('admin/alternatif*') ? 'active' : '' }}">
|
|
<a href="{{ url('admin/alternatif') }}">
|
|
<i class="fa fa-leaf"></i>
|
|
<span>Alternatif</span>
|
|
</a>
|
|
</li>
|
|
<li class="{{ request()->is('admin/kriteria*') ? 'active' : '' }}">
|
|
<a href="{{ url('admin/kriteria') }}">
|
|
<i class="fa fa-balance-scale"></i>
|
|
<span>Kriteria & Bobot</span>
|
|
</a>
|
|
</li>
|
|
<li class="{{ request()->routeIs('admin.penilaian.index') ? 'active' : '' }}">
|
|
<a href="{{ route('admin.penilaian.index') }}">
|
|
<i class="fa fa-calculator"></i>
|
|
<span>Penilaian SAW</span>
|
|
</a>
|
|
</li>
|
|
@else
|
|
<li class="{{ request()->routeIs('author.dashboard-author') ? 'active' : '' }}">
|
|
<a href="{{ route('author.dashboard-author') }}">
|
|
<i class="fa fa-dashboard"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li class="{{ request()->routeIs('user.input-data.index') ? 'active' : '' }}">
|
|
<a href="{{ route('user.input-data.index') }}">
|
|
<i class="fa fa-edit"></i>
|
|
<span>Input Data</span>
|
|
</a>
|
|
</li>
|
|
<li class="{{ request()->routeIs('user.rekomendasi.index') ? 'active' : '' }}">
|
|
<a href="{{ route('user.rekomendasi.index') }}">
|
|
<i class="fa fa-star"></i>
|
|
<span>Rekomendasi</span>
|
|
</a>
|
|
</li>
|
|
@endif
|
|
|
|
<li class="logout-item">
|
|
<a href="#" class="logout-trigger" data-toggle="modal" data-target="#logoutModal">
|
|
<i class="fa fa-sign-out"></i>
|
|
<span>Logout</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Overlay untuk mobile -->
|
|
<div class="sidebar-overlay"></div>
|
|
|
|
<!-- Modal Logout -->
|
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="logoutModalLabel">Konfirmasi Logout</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Apakah Anda yakin ingin keluar?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<form action="{{ route('logout') }}" method="POST" style="display: inline;">
|
|
@csrf
|
|
<button type="submit" class="btn btn-danger">Logout</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.sidebar {
|
|
width: 260px;
|
|
height: 100vh;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background: #fff;
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
border-right: 1px solid #e9ecef;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sidebar-brand {
|
|
color: #333;
|
|
font-size: 18px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mobile-nav-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: #333;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
|
|
.mobile-nav-toggle:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.sidebar-body {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.nav {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav li {
|
|
margin: 2px 15px;
|
|
}
|
|
|
|
.nav li a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
color: #495057;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav li a:hover {
|
|
background: #f8f9fa;
|
|
color: #28a745;
|
|
}
|
|
|
|
.nav li.active a {
|
|
background: #e8f5e9;
|
|
color: #28a745;
|
|
}
|
|
|
|
.nav li a i {
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav li a span {
|
|
flex: 1;
|
|
}
|
|
|
|
.logout-item {
|
|
margin-top: 20px !important;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
.logout-item a {
|
|
color: #dc3545 !important;
|
|
}
|
|
|
|
.logout-item a:hover {
|
|
background: #fff5f5 !important;
|
|
}
|
|
|
|
/* Overlay untuk mobile */
|
|
.sidebar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 999;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.sidebar-overlay.show {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Mobile Styles */
|
|
@media (max-width: 768px) {
|
|
.mobile-nav-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar {
|
|
transform: translateX(-100%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.sidebar.show {
|
|
transform: translateX(0);
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.nav li {
|
|
margin: 5px 15px;
|
|
}
|
|
|
|
.nav li a {
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.nav li a span {
|
|
display: inline-block;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
body.sidebar-open {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* Modal Styling */
|
|
.modal-content {
|
|
border-radius: 8px;
|
|
border: none;
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid #e9ecef;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.modal-title {
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid #e9ecef;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #dc3545;
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c82333;
|
|
border-color: #bd2130;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
border-color: #6c757d;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #5a6268;
|
|
border-color: #545b62;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const body = document.querySelector('body');
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const overlay = document.querySelector('.sidebar-overlay');
|
|
const mobileToggle = document.querySelector('.mobile-nav-toggle');
|
|
const logoutTrigger = document.querySelector('.logout-trigger');
|
|
|
|
function toggleSidebar() {
|
|
sidebar.classList.toggle('show');
|
|
overlay.classList.toggle('show');
|
|
body.classList.toggle('sidebar-open');
|
|
|
|
if (sidebar.classList.contains('show')) {
|
|
mobileToggle.innerHTML = '<i class="fa fa-times"></i>';
|
|
} else {
|
|
mobileToggle.innerHTML = '<i class="fa fa-bars"></i>';
|
|
}
|
|
}
|
|
|
|
// Toggle sidebar
|
|
mobileToggle.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
toggleSidebar();
|
|
});
|
|
|
|
// Close sidebar when clicking overlay
|
|
overlay.addEventListener('click', function() {
|
|
toggleSidebar();
|
|
});
|
|
|
|
// Prevent clicks inside sidebar from closing it
|
|
sidebar.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// Close sidebar when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (sidebar.classList.contains('show') &&
|
|
!e.target.closest('.sidebar') &&
|
|
!e.target.closest('.mobile-nav-toggle')) {
|
|
toggleSidebar();
|
|
}
|
|
});
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth > 768 && sidebar.classList.contains('show')) {
|
|
toggleSidebar();
|
|
}
|
|
});
|
|
|
|
// Handle logout click
|
|
logoutTrigger.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.modal !== 'undefined') {
|
|
jQuery('#logoutModal').modal('show');
|
|
} else if (typeof bootstrap !== 'undefined') {
|
|
const logoutModal = new bootstrap.Modal(document.getElementById('logoutModal'));
|
|
logoutModal.show();
|
|
}
|
|
});
|
|
});
|
|
</script>
|