updated and fixed navbar

This commit is contained in:
Sergio Brighenti 2024-08-26 10:49:23 +02:00
parent 2b37296225
commit db2629b422
4 changed files with 24 additions and 12 deletions

View file

@ -11,7 +11,7 @@ class AppBrand extends Component
/** /**
* Create a new component instance. * Create a new component instance.
*/ */
public function __construct() public function __construct(public ?bool $onTop = false)
{ {
// //
} }
@ -25,9 +25,13 @@ class AppBrand extends Component
<a href="/" wire:navigate> <a href="/" wire:navigate>
<!-- Hidden when collapsed --> <!-- Hidden when collapsed -->
<div {{ $attributes->class(["hidden-when-collapsed"]) }}> <div {{ $attributes->class(["hidden-when-collapsed"]) }}>
<div class="flex items-center gap-2"> <div class="flex items-center {{ $onTop ? 'flex-col justify-center' : 'gap-2 btn btn-link no-underline hover:no-underline' }}">
<x-icon name="o-square-3-stack-3d" class="w-6 -mb-1 text-purple-500" /> <div class="avatar">
<span class="font-bold text-3xl me-3 bg-gradient-to-r from-purple-500 to-pink-300 bg-clip-text text-transparent "> <div class="{{ $onTop ? 'w-24' : 'w-12' }}">
<img src="{{ asset('img/android-chrome-192x192.png') }}" />
</div>
</div>
<span class="font-bold text-3xl bg-gradient-to-r from-blue-500 to-green-400 bg-clip-text text-transparent ">
{{ config('app.name') }} {{ config('app.name') }}
</span> </span>
</div> </div>

View file

@ -35,30 +35,30 @@
<x-app-brand/> <x-app-brand/>
</div> </div>
<div class="navbar-center hidden lg:flex"> <div class="navbar-center hidden lg:flex">
<x-menu activate-by-route class="menu-horizontal"> <x-menu activate-by-route class="menu-horizontal z-50 flex items-center">
<x-menu-item title="Home" icon="o-home" link="###"/> <x-menu-item title="Home" icon="o-home" link="###"/>
<x-menu-item title="Messages" icon="o-envelope" link="###"/> <x-menu-item title="Messages" icon="o-envelope" link="###"/>
<x-menu-sub title="Settings" icon="o-cog-6-tooth"> <x-menu-sub title="Settings" icon="o-cog-6-tooth">
<x-menu-item title="Wifi" icon="o-wifi" link="####"/>
<x-menu-item title="Wifi" icon="o-wifi" link="####"/>
<x-menu-item title="Wifi" icon="o-wifi" link="####"/>
<x-menu-item title="Wifi" icon="o-wifi" link="####"/> <x-menu-item title="Wifi" icon="o-wifi" link="####"/>
<x-menu-item title="Archives" icon="o-archive-box" link="####"/> <x-menu-item title="Archives" icon="o-archive-box" link="####"/>
</x-menu-sub> </x-menu-sub>
</x-menu> </x-menu>
</div> </div>
<div class="navbar-end"> <div class="navbar-end mr-2">
@if($user = auth()->user()) @if($user = auth()->user())
<x-dropdown> <x-dropdown>
<x-slot:trigger> <x-slot:trigger>
<x-avatar :image="$user->avatar" :title="$user->username" :subtitle="$user->name" <x-avatar :image="$user->avatar" :title="$user->username" :subtitle="$user->name"
class="!w-10"/> class="!w-10"/>
</x-slot:trigger> </x-slot:trigger>
<x-menu-item icon="o-power" title="Logout" link="javascript:void(0)" <x-menu-item icon="o-power" title="Logout" link="javascript:document.getElementById('logout-form').submit();" no-wire-navigate/>
onclick="event.preventDefault();document.getElementById('logout-form').submit();"
no-wire-navigate/>
</x-dropdown> </x-dropdown>
@endif @endif
</div> </div>
</div> </div>
<form method="POST" action="{{ route('logout') }}" id="logout-form">@csrf</form>
<x-main with-nav full-width> <x-main with-nav full-width>
<x-slot:content> <x-slot:content>
@ -66,5 +66,6 @@
</x-slot:content> </x-slot:content>
</x-main> </x-main>
<form method="POST" action="{{ route('logout') }}" id="logout-form">@csrf</form>
<x-toast/> <x-toast/>
@endsection @endsection

View file

@ -5,7 +5,7 @@
<div class="relative flex flex-col items-center justify-center h-screen overflow-hidden w-96"> <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"> <x-card shadow class="w-96 pr-8 pl-8">
<h1 class="mb-6 justify-center flex"> <h1 class="mb-6 justify-center flex">
<x-app-brand/> <x-app-brand on-top/>
</h1> </h1>
{{ $slot }} {{ $slot }}
</x-card> </x-card>

View file

@ -1,3 +1,10 @@
<div> <div>
feefefef feefefef
<br>
<br>
<br>
<br>
<br>
adsdsds
<x-theme-toggle />
</div> </div>