wip layout

This commit is contained in:
Sergio Brighenti 2024-08-26 01:20:57 +02:00
parent 1adede3a3c
commit 2b37296225
2 changed files with 55 additions and 48 deletions

View file

@ -1,63 +1,70 @@
@extends('components.layouts.base')
@section('body')
{{-- NAVBAR mobile only --}}
<x-nav sticky class="lg:hidden">
<x-slot:brand>
<div class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"/>
</svg>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li>
<a>Parent</a>
<ul class="p-2">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</li>
<li><a>Item 3</a></li>
</ul>
</div>
<x-app-brand/>
</x-slot:brand>
<x-slot:actions>
<label for="main-drawer" class="lg:hidden me-3">
<x-icon name="o-bars-3" class="cursor-pointer"/>
</label>
</x-slot:actions>
</x-nav>
{{-- MAIN --}}
<x-main full-width>
{{-- SIDEBAR --}}
<x-slot:sidebar drawer="main-drawer" collapsible class="bg-base-100 lg:bg-inherit">
{{-- BRAND --}}
<x-app-brand class="p-5 pt-3"/>
{{-- MENU --}}
<x-menu activate-by-route>
{{-- User --}}
@if($user = auth()->user())
<x-menu-separator/>
<x-list-item :item="$user" value="name" sub-value="email" no-separator no-hover class="-mx-2 !-my-2 rounded">
<x-slot:actions>
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-button icon="o-power" class="btn-circle btn-ghost btn-xs" tooltip-left="logoff" onclick="event.preventDefault();this.closest('form').submit();"/>
</form>
</x-slot:actions>
</x-list-item>
<x-menu-separator/>
@endif
<x-menu-item title="Hello" icon="o-sparkles" link="/"/>
</div>
<div class="navbar-center hidden lg:flex">
<x-menu activate-by-route class="menu-horizontal">
<x-menu-item title="Home" icon="o-home" link="###"/>
<x-menu-item title="Messages" icon="o-envelope" link="###"/>
<x-menu-sub title="Settings" icon="o-cog-6-tooth">
<x-menu-item title="Wifi" icon="o-wifi" link="####"/>
<x-menu-item title="Archives" icon="o-archive-box" link="####"/>
</x-menu-sub>
</x-menu>
</x-slot:sidebar>
</div>
<div class="navbar-end">
@if($user = auth()->user())
<x-dropdown>
<x-slot:trigger>
<x-avatar :image="$user->avatar" :title="$user->username" :subtitle="$user->name"
class="!w-10"/>
</x-slot:trigger>
<x-menu-item icon="o-power" title="Logout" link="javascript:void(0)"
onclick="event.preventDefault();document.getElementById('logout-form').submit();"
no-wire-navigate/>
</x-dropdown>
@endif
</div>
</div>
<form method="POST" action="{{ route('logout') }}" id="logout-form">@csrf</form>
{{-- The `$slot` goes here --}}
<x-main with-nav full-width>
<x-slot:content>
{{ $slot }}
</x-slot:content>
</x-main>
{{-- TOAST area --}}
<x-toast/>
@endsection

View file

@ -4,8 +4,8 @@
<div class="grid h-screen place-items-center">
<div class="relative flex flex-col items-center justify-center h-screen overflow-hidden w-96">
<x-card shadow class="w-96 pr-8 pl-8">
<h1 class="text-3xl font-semibold text-center mb-4">
{{ config('app.name') }}
<h1 class="mb-6 justify-center flex">
<x-app-brand/>
</h1>
{{ $slot }}
</x-card>