Shell for admin side
This commit is contained in:
parent
27825b8356
commit
52de7bcb05
|
|
@ -0,0 +1,37 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\View\Components\Layout;
|
||||||
|
|
||||||
|
use Closure;
|
||||||
|
use Illuminate\Contracts\View\View;
|
||||||
|
use Illuminate\View\Component;
|
||||||
|
|
||||||
|
class Admin extends Component
|
||||||
|
{
|
||||||
|
public array $menuItems = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new component instance.
|
||||||
|
*/
|
||||||
|
public function __construct()
|
||||||
|
{
|
||||||
|
$this->menuItems = [
|
||||||
|
[
|
||||||
|
'name' => 'Site Home',
|
||||||
|
'link' => route('welcome'),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'name' => 'Dashboard',
|
||||||
|
'link' => route('admin.dashboard'),
|
||||||
|
],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the view / contents that represent the component.
|
||||||
|
*/
|
||||||
|
public function render(): View|Closure|string
|
||||||
|
{
|
||||||
|
return view('components.layout.admin');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,9 @@
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindplus/elements": "^1.0.20"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/vite": "^4.0.0",
|
"@tailwindcss/vite": "^4.0.0",
|
||||||
"axios": "^1.11.0",
|
"axios": "^1.11.0",
|
||||||
|
|
@ -1085,6 +1088,12 @@
|
||||||
"vite": "^5.2.0 || ^6 || ^7"
|
"vite": "^5.2.0 || ^6 || ^7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tailwindplus/elements": {
|
||||||
|
"version": "1.0.20",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tailwindplus/elements/-/elements-1.0.20.tgz",
|
||||||
|
"integrity": "sha512-ka/4LlqzXmKjcoyRsKu8eBotl3KaDrMhdTr2+YDpjLj5Sy21FTIgg0gniDBPYTVZMFj6L82Cw4aNh2BJkjuRoQ==",
|
||||||
|
"license": "SEE LICENSE IN LICENSE.md"
|
||||||
|
},
|
||||||
"node_modules/@types/estree": {
|
"node_modules/@types/estree": {
|
||||||
"version": "1.0.8",
|
"version": "1.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||||
|
|
|
||||||
|
|
@ -13,5 +13,8 @@
|
||||||
"laravel-vite-plugin": "^2.0.0",
|
"laravel-vite-plugin": "^2.0.0",
|
||||||
"tailwindcss": "^4.0.0",
|
"tailwindcss": "^4.0.0",
|
||||||
"vite": "^7.0.7"
|
"vite": "^7.0.7"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindplus/elements": "^1.0.20"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,2 @@
|
||||||
import './bootstrap';
|
import './bootstrap';
|
||||||
|
import '@tailwindplus/elements';
|
||||||
|
|
|
||||||
|
|
@ -1 +1,3 @@
|
||||||
|
<x-layout.admin>
|
||||||
Hello {{ auth()->getUser()->name }}
|
Hello {{ auth()->getUser()->name }}
|
||||||
|
</x-layout.admin>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<!doctype html>
|
||||||
|
<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">
|
||||||
|
<div class="px-4 sm:px-6 lg:px-8">
|
||||||
|
{{ $slot }}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -8,6 +8,16 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-800 text-white">
|
<body class="bg-gray-800 text-white">
|
||||||
<header>
|
<header>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<div class="content-center">
|
||||||
|
@auth
|
||||||
|
<span class="px-5">
|
||||||
|
<a href="{{ route('admin.dashboard') }}">
|
||||||
|
Admin Dashboard
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
@endauth
|
||||||
|
</div>
|
||||||
<div id="links" class="h-8 content-center text-right">
|
<div id="links" class="h-8 content-center text-right">
|
||||||
@foreach($links as $link)
|
@foreach($links as $link)
|
||||||
<span class="px-5">
|
<span class="px-5">
|
||||||
|
|
@ -17,6 +27,7 @@
|
||||||
</span>
|
</span>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="name-banner" class="bg-cover bg-bottom w-full h-64 text-center content-center"
|
<div id="name-banner" class="bg-cover bg-bottom w-full h-64 text-center content-center"
|
||||||
style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/meobda-stage.jpeg');">
|
style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/meobda-stage.jpeg');">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue