340 lines
8.9 KiB
PHP
340 lines
8.9 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>
|
|
|
|
<!-- Fonts -->
|
|
<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">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- BUILD CSS -->
|
|
<link rel="stylesheet"
|
|
href="https://ta.myhost.id/E31230906/build/assets/app-BrgOBkF_.css">
|
|
|
|
<!-- CUSTOM CSS -->
|
|
<link rel="stylesheet"
|
|
href="https://ta.myhost.id/E31230906/css/sidebar.css">
|
|
|
|
<link rel="stylesheet"
|
|
href="https://ta.myhost.id/E31230906/css/dashboard.css">
|
|
|
|
@stack('styles')
|
|
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
background: #f0f7f3;
|
|
font-family: 'Figtree', sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.app-wrapper {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* SIDEBAR */
|
|
.sb {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 190px;
|
|
height: 100vh;
|
|
z-index: 999;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.sb.sb-collapsed {
|
|
width: 68px;
|
|
}
|
|
|
|
/* MAIN */
|
|
.main-wrapper {
|
|
margin-left: 190px;
|
|
width: calc(100% - 190px);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.3s ease;
|
|
background: #f0f7f3;
|
|
}
|
|
|
|
.main-wrapper.sb-collapsed {
|
|
margin-left: 68px;
|
|
width: calc(100% - 68px);
|
|
}
|
|
|
|
/* TOPBAR */
|
|
.main-topbar {
|
|
width: 100%;
|
|
padding: 16px 24px;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.topbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sb-toggle-btn {
|
|
border: none;
|
|
background: #16a34a;
|
|
color: white;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.clock-pill {
|
|
background: #16a34a;
|
|
color: white;
|
|
padding: 10px 16px;
|
|
border-radius: 999px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dot-live {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #22c55e;
|
|
border-radius: 999px;
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.3);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* CONTENT */
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 24px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* RESPONSIVE LAYOUT */
|
|
@media (max-width: 768px) {
|
|
.sb {
|
|
transform: translateX(-100%);
|
|
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>
|
|
|
|
<div id="app-wrapper" class="app-wrapper">
|
|
|
|
{{-- SIDEBAR --}}
|
|
@include('layouts.navigation')
|
|
|
|
{{-- MAIN --}}
|
|
<div class="main-wrapper" id="main-wrapper">
|
|
|
|
{{-- TOPBAR --}}
|
|
<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 style="font-size: 14px;">
|
|
Selamat datang,
|
|
<strong>{{ Auth::user()->name ?? 'User' }}</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>
|
|
|
|
{{-- CONTENT --}}
|
|
<main class="main-content">
|
|
{{ $slot }}
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- BUILD JS -->
|
|
<script type="module"
|
|
src="https://ta.myhost.id/E31230906/build/assets/app-Dc4K3eNH.js"></script>
|
|
|
|
{{-- CLOCK --}}
|
|
<script>
|
|
(function tick() {
|
|
|
|
const now = new Date();
|
|
|
|
const date = now.toLocaleDateString('id-ID', {
|
|
weekday: 'long',
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
|
|
const time = now.toLocaleTimeString('id-ID', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
});
|
|
|
|
const el = document.getElementById('main-clock');
|
|
|
|
if (el) {
|
|
el.textContent = `${date} · ${time}`;
|
|
}
|
|
|
|
setTimeout(tick, 1000);
|
|
|
|
})();
|
|
</script>
|
|
|
|
{{-- SIDEBAR --}}
|
|
<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>
|
|
|
|
@stack('scripts')
|
|
|
|
</body>
|
|
|
|
</html> |