119 lines
4.1 KiB
PHP
119 lines
4.1 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, maximum-scale=1.0, user-scalable=yes">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>@yield('title', 'LearnMood')</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
|
<!-- Tailwind CSS via Vite -->
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<!-- Fallback Tailwind CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<style>
|
|
/* Memastikan konten tidak tertutup navbar */
|
|
body {
|
|
padding-top: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.navbar-fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background-color: white;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding-top: 70px; /* Sesuai tinggi navbar */
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Mobile optimizations */
|
|
@media (max-width: 640px) {
|
|
.content-wrapper {
|
|
padding-top: 60px; /* Sedikit lebih kecil di mobile */
|
|
}
|
|
|
|
.container {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased bg-gray-100">
|
|
<div class="min-h-screen">
|
|
@auth
|
|
<!-- Navbar Fixed -->
|
|
<nav class="navbar-fixed bg-white border-b border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<!-- Logo -->
|
|
<div class="flex items-center">
|
|
<a href="{{ route('dashboard') }}" class="text-xl font-bold text-blue-600">
|
|
Learn<span class="text-gray-800">Mood</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation - Desktop -->
|
|
@if(auth()->user()->role == 'siswa')
|
|
@include('layouts.navigation-siswa')
|
|
@elseif(auth()->user()->role == 'orang_tua')
|
|
@include('layouts.navigation-ortu')
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Container -->
|
|
<div id="mobileMenuContainer">
|
|
<!-- Akan diisi oleh navigation-siswa atau navigation-ortu -->
|
|
</div>
|
|
</nav>
|
|
@endauth
|
|
|
|
<!-- Content Wrapper dengan padding-top -->
|
|
<div class="content-wrapper">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Alerts -->
|
|
@if(session('success'))
|
|
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-4">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-4">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('info'))
|
|
<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-lg mb-4">
|
|
{{ session('info') }}
|
|
</div>
|
|
@endif
|
|
|
|
@yield('content')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alpine.js untuk dropdown -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
@stack('scripts')
|
|
</body>
|
|
</html> |