MIF_E31222596/website/resources/views/layouts/app.blade.php

90 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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</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.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link rel="icon" type="image/png" href="{{ asset('assets/img/logos/LOGO.png') }}" />
</head>
<body class="font-sans antialiased">
<div class="min-h-screen flex bg-gray-100">
@hasSection('sidebar')
@yield('sidebar')
@else
@include('layouts.navigation')
@endif
<div class="flex flex-col flex-1 w-full ml-64">
<!-- Top Nav -->
<nav class="bg-white shadow-md p-4 flex justify-between items-center">
<div>
<h1 class="text-xl font-bold text-gray-800">
@if(isset($header))
{{ $header }}
@else
Dashboard
@endif
</h1>
</div>
<div class="relative">
<button onclick="toggleDropdown('profileDropdown')" class="flex items-center space-x-2">
<span class="font-semibold">{{ Auth::user()->name }}</span>
<i class="fas fa-chevron-down text-sm"></i>
</button>
<div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20">
<a href="@if(Auth::user()->isGuru()){{ route('guru.profile') }}@else#@endif" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
Log Out
</button>
</form>
</div>
</div>
</nav>
<!-- Page Content -->
<main class="flex-1 p-6">
@hasSection('content')
@yield('content')
@else
{{ $slot ?? '' }}
@endif
</main>
</div>
<script>
function toggleDropdown(id) {
const dropdown = document.getElementById(id);
if (dropdown) {
dropdown.classList.toggle('hidden');
}
const icon = document.getElementById(id + 'Icon');
if (icon) {
icon.classList.toggle('rotate-180');
}
}
document.addEventListener('click', function(event) {
const profileDropdown = document.getElementById('profileDropdown');
const profileButton = profileDropdown ? profileDropdown.previousElementSibling : null;
if (profileButton && !profileButton.contains(event.target) && !profileDropdown.contains(event.target)) {
profileDropdown.classList.add('hidden');
}
});
</script>
</div>
</body>
</html>