221 lines
7.4 KiB
PHP
221 lines
7.4 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>{{ config('app.name', 'SIPDAM') }}</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<link rel="stylesheet" href="{{ asset('css/sidebar.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
|
|
|
|
@stack('styles') {{-- ✅ ini saja yang ditambah di app.blade.php --}}
|
|
@stack('scripts')
|
|
|
|
{{-- ✅ Override Tailwind --}}
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background: #f0f7f3 !important;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-wrapper {
|
|
display: flex !important;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
/* Sidebar selalu fixed di kiri */
|
|
.sb {
|
|
position: fixed !important;
|
|
left: 0 !important;
|
|
top: 0 !important;
|
|
height: 100vh !important;
|
|
width: 190px !important;
|
|
z-index: 50 !important;
|
|
transition: width 0.3s ease !important;
|
|
}
|
|
|
|
.sb.sb-collapsed {
|
|
width: 68px !important;
|
|
}
|
|
|
|
/* Main wrapper geser sesuai lebar sidebar */
|
|
.main-wrapper {
|
|
margin-left: 190px !important;
|
|
width: calc(100% - 190px) !important;
|
|
min-height: 100vh !important;
|
|
transition: margin-left 0.3s ease, width 0.3s ease !important;
|
|
background: #f0f7f3 !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.main-wrapper.sb-collapsed {
|
|
margin-left: 68px !important;
|
|
width: calc(100% - 68px) !important;
|
|
}
|
|
|
|
/* Topbar tidak terpotong */
|
|
.main-topbar {
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Konten tidak overflow */
|
|
.main-content {
|
|
flex: 1 !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* RESPONSIVE LAYOUT */
|
|
@media (max-width: 768px) {
|
|
.sb {
|
|
transform: translateX(-100%) !important;
|
|
width: 190px !important;
|
|
transition: transform 0.3s ease !important;
|
|
z-index: 1000 !important;
|
|
}
|
|
.sb.sb-mobile-open {
|
|
transform: translateX(0) !important;
|
|
}
|
|
.main-wrapper {
|
|
margin-left: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
.main-wrapper.sb-collapsed {
|
|
margin-left: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
.main-topbar {
|
|
padding: 12px 16px !important;
|
|
flex-direction: column !important;
|
|
align-items: flex-start !important;
|
|
gap: 10px !important;
|
|
}
|
|
.topbar-left {
|
|
width: 100% !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
.topbar-right {
|
|
width: 100% !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
.clock-pill {
|
|
width: 100% !important;
|
|
justify-content: center !important;
|
|
padding: 8px 12px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
.main-content {
|
|
padding: 16px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased">
|
|
|
|
<div id="app-wrapper" class="app-wrapper">
|
|
|
|
@include('layouts.navigation')
|
|
|
|
<div class="main-wrapper" id="main-wrapper">
|
|
|
|
<header class="main-topbar">
|
|
<div class="topbar-left">
|
|
<button id="sidebar-toggle-btn" class="sb-toggle-btn">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<div>
|
|
<div class="topbar-sub" style="font-size: 14px;">
|
|
Selamat datang, <strong>{{ Auth::user()->name }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="clock-pill">
|
|
<span class="dot-live"></span>
|
|
<span id="main-clock">—</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
{{ $slot }}
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function tick() {
|
|
const now = new Date();
|
|
const d = now.toLocaleDateString('id-ID', {
|
|
weekday: 'long', day: '2-digit',
|
|
month: 'long', year: 'numeric'
|
|
});
|
|
const t = now.toLocaleTimeString('id-ID', {
|
|
hour: '2-digit', minute: '2-digit', second: '2-digit'
|
|
});
|
|
const el = document.getElementById('main-clock');
|
|
if (el) el.textContent = d + ' · ' + t;
|
|
setTimeout(tick, 1000);
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const mainWrapper = document.getElementById('main-wrapper');
|
|
const toggleBtn = document.getElementById('sidebar-toggle-btn');
|
|
|
|
document.querySelectorAll('.menu-toggle > .menu-parent').forEach(parent => {
|
|
parent.addEventListener('click', function () {
|
|
this.closest('.menu-toggle').classList.toggle('active');
|
|
});
|
|
});
|
|
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
if (window.innerWidth <= 768) {
|
|
if (sidebar) {
|
|
sidebar.classList.toggle('sb-mobile-open');
|
|
}
|
|
} else {
|
|
if (sidebar) {
|
|
sidebar.classList.toggle('sb-collapsed');
|
|
}
|
|
if (mainWrapper) {
|
|
mainWrapper.classList.toggle('sb-collapsed');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Close sidebar on mobile when clicking outside
|
|
document.addEventListener('click', function (event) {
|
|
if (window.innerWidth <= 768 && sidebar && sidebar.classList.contains('sb-mobile-open')) {
|
|
if (!sidebar.contains(event.target) && !toggleBtn.contains(event.target)) {
|
|
sidebar.classList.remove('sb-mobile-open');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |