File Manager

Edit File: offcanvas-navbar.blade.php

<div class="sticky z-[9999] top-0 w-full">
    
    <nav class="flex items-center justify-between bg-gray-800 p-4 text-white z-50 border-b-2 border-red-600">
        <div class="flex items-center justify-center mx-auto md:w-3/4 relative w-full">
            
            <div class="text-xl font-bold lg:w-1/4">
                <a href="{{ route("home") }}"><img src="{{$page->logo}}" alt="Logo {{$page->name}}" class="mx-auto max-w-64"></a>
            </div>
            <div class="hidden lg:flex w-3/4 flex-wrap whitespace-nowrap divide-x-2 divide-red-600">
                <a href="{{ route("home") }}" class="block p-2 border-l-2 border-l-red-600 hover:bg-red-600 hover:scale-125 duration-200 hover:rounded-md {{request()->routeIs('home') ? "bg-red-600": " "}}">Beranda</a>
                
                <a href="{{route("genre.show.list")}}" class="block p-2 hover:bg-red-600 hover:scale-125 duration-200 hover:rounded-md {{request()->routeIs('genre.sh*') ? "bg-red-600": " "}}">Daftar Genre</a>
                <a href="{{ route("season.show.list")}}" class="block p-2 hover:bg-red-600 hover:scale-125 duration-200 hover:rounded-md {{request()->routeIs('season.show.list') ? "bg-red-600": " "}}">Daftar Season Anime</a>
                <a href="{{ route("completed.show") }}" class="block p-2 hover:bg-red-600 hover:scale-125 duration-200 hover:rounded-md {{request()->routeIs('completed.show') ? "bg-red-600": " "}}">Anime Tamat</a>
                <a href="{{ route("filmlist")}}" class="block p-2 hover:bg-red-600 hover:scale-125 duration-200 hover:rounded-md {{request()->routeIs('filmlist') ? "bg-red-600": " "}}">Daftar Film</a>
                <div class="">
                    <a href="{{ route("login") }}" class="block bg-red-600 hover:bg-red-800 text-center py-2 rounded w-24 mx-4">{{ Auth::check() ? "Dashboard" : "Login" }}</a>
                </div>
                <div class="">
                    <a href="{{ route("register") }}" class="bg-red-600 hover:bg-red-800 text-center py-2 rounded w-24 ms-4 {{Auth::check() ? "hidden" : "block"}}">Register</a>
                </div>

</nav>

<div class="fixed top-0 left-0 h-full w-64 bg-gray-900 text-white transform transition-transform duration-300 z-50 {{ $isOpen ? 'translate-x-0 overflow-y-auto' : '-translate-x-full' }}">
        <div class="p-4">
            <h2 class="text-2xl font-bold mb-4"><a href="{{ route("home") }}"><img src="{{$page->logo}}" alt="Logo {{$page->name}}" class="max-w-48 w-1/2 "></a></h2>
            <ul class="space-y-4">
                <li><a href="{{ route("home") }}" class="block p-2 border-l-2 border-l-red-600 {{request()->routeIs('home') ? "bg-red-600": " "}}" class="block hover:bg-gray-700 p-2">Beranda</a></li>
                
                <li><a href="{{route("genre.show.list")}}" class="block hover:bg-gray-700 p-2">Daftar Genre</a></li>
                <li><a href="{{ route("season.show", $current_season->slug)}}" class="block hover:bg-gray-700 p-2">Daftar Musim</a></li>
                <li><a href="{{ route("filmlist") }}" class="block hover:bg-gray-700 p-2">Anime Tamat</a></li>
                <li><a href="#" class="block hover:bg-gray-700 p-2">Daftar Film</a></li>

<div class="w-full flex p-2 duration-200">
                    <input wire:model="query" type="text" placeholder="Cari Berdasarkan Judul" class="focus:ring-red-600 focus:border-transparent bg-transparent text-red-600 placeholder:text-red-700 border-t-0 border-x-0 w-full">
                    <button wire:click="search" class="bg-red-600 w-24 grid place-items-center">CARI</button>
                </div>
            </ul>
            <div class="mt-8">
                <a href="{{ route("login") }}" class="block bg-red-600 hover:bg-red-800 text-center py-2 rounded">{{ Auth::check() ? "Dashboard" : "Login" }}</a>
            </div>
            <div class="mt-2">
                <button wire:click="toggleNavbar" class="block border-2 border-red-600 hover:bg-red-600 text-center py-2 rounded w-full">{{ __("Tutup") }}</button>
            </div>
        </div>
    </div>

<div wire:click="toggleNavbar" class="fixed inset-0 bg-black opacity-50 z-40 {{ $isOpen ? 'block' : 'hidden' }}"></div>
</div>

Back