meobda-website/resources/views/components/layout/admin.blade.php

130 lines
6.2 KiB
PHP

<!doctype html>
<!--suppress JSDeprecatedSymbols, JSUnresolvedReference -->
<html lang="en" class="h-full bg-white dark:bg-gray-900">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mideast Oklahoma Band Directors Association</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="h-full">
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<!--
This example requires updating your template:
```
<html class="h-full bg-white dark:bg-gray-900">
<body class="h-full">
```
-->
<el-dialog>
<dialog id="sidebar" class="backdrop:bg-transparent lg:hidden">
<el-dialog-backdrop
class="fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-closed:opacity-0"></el-dialog-backdrop>
<div tabindex="0" class="fixed inset-0 flex focus:outline-none">
<el-dialog-panel
class="group/dialog-panel relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full">
<div
class="absolute top-0 left-full flex w-16 justify-center pt-5 duration-300 ease-in-out group-data-closed/dialog-panel:opacity-0">
<button type="button" command="close" commandfor="sidebar" class="-m-2.5 p-2.5">
<span class="sr-only">Close sidebar</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon"
aria-hidden="true" class="size-6 text-white">
<path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div
class="flex grow flex-col gap-y-5 overflow-y-auto bg-brand-600 px-6 pb-2 dark:bg-brand-800 dark:ring-1 dark:ring-white/10">
<div class="flex h-16 shrink-0 items-center text-white text-2xl font-semibold">
MEOBDA
</div>
<nav class="flex flex-1 flex-col text-white">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
@foreach($menuItems as $menuItem)
<li><a href="{{ $menuItem['link'] }}">{{ $menuItem['name'] }}</a></li>
@endforeach
<li>
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
@csrf
</form>
</li>
</ul>
</nav>
</div>
</el-dialog-panel>
</div>
</dialog>
</el-dialog>
<!-- Static sidebar for desktop -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div
class="relative flex grow flex-col gap-y-5 overflow-y-auto bg-brand-600 px-6 dark:bg-brand-800 dark:after:pointer-events-none dark:after:absolute dark:after:inset-y-0 dark:after:right-0 dark:after:w-px dark:after:bg-white/10">
<div class="flex h-16 shrink-0 items-center text-white text-3xl">
MEOBDA
</div>
<nav class="flex flex-1 flex-col text-white">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
@foreach($menuItems as $menuItem)
<li><a href="{{ $menuItem['link'] }}">{{ $menuItem['name'] }}</a></li>
@endforeach
<li>
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
@csrf
</form>
</li>
</ul>
</nav>
</div>
</div>
<div
class="sticky top-0 z-40 flex items-center gap-x-6 bg-brand-600 px-4 py-4 shadow-xs sm:px-6 lg:hidden dark:bg-brand-800 dark:after:pointer-events-none dark:after:absolute dark:after:inset-x-0 dark:after:bottom-0 dark:after:h-px dark:after:bg-white/10">
<button type="button" command="show-modal" commandfor="sidebar"
class="-m-2.5 p-2.5 text-brand-200 hover:text-white lg:hidden">
<span class="sr-only">Open sidebar</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon"
aria-hidden="true" class="size-6">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="flex-1 text-sm/6 font-semibold text-white">Dashboard</div>
</div>
<main class="py-10 lg:pl-72">
@if(session('success'))
<div class="mx-4 mb-4 rounded-md bg-green-50 p-4 sm:mx-6 lg:mx-8 dark:bg-green-900/20">
<div class="flex">
<div class="shrink-0">
<svg class="size-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800 dark:text-green-200">{{ session('success') }}</p>
</div>
</div>
</div>
@endif
<div class="px-4 sm:px-6 lg:px-8">
{{ $slot }}
</div>
</main>
</body>
</html>