159 lines
10 KiB
PHP
159 lines
10 KiB
PHP
<nav class="w-full shadow-md xl:shadow-lg z-[100] relative">
|
|
<div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-2 lg:p-4">
|
|
<a href="/"
|
|
class="flex items-center gap-1 pacifico-regular text-lg lg:text-2xl text-[#205C9E] transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95 hover:text-[#4A90E2]">
|
|
<img src="{{ asset('img/logo-color.png') }}" alt="Logo Explore Jember" class="w-8 h-8">
|
|
<p>Explore Jember</p>
|
|
</a>
|
|
|
|
|
|
|
|
<style>
|
|
.pacifico-regular {
|
|
font-family: "Pacifico", cursive;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
</style>
|
|
<button data-collapse-toggle="navbar-default" type="button"
|
|
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
|
|
aria-controls="navbar-default" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 17 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M1 1h15M1 7h15M1 13h15" />
|
|
</svg>
|
|
</button>
|
|
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
|
<ul id="navbar"
|
|
class="font-medium flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 ">
|
|
<ul class="flex flex-col md:flex-row md:space-x-8">
|
|
<!-- Menu "Home" -->
|
|
<li>
|
|
<a href="/"
|
|
class="block py-2 px-3 rounded md:bg-transparent md:p-0 transition-all duration-300 ease-in-out font-poppins transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95
|
|
{{ request()->is('/') ? 'text-[#205C9E] font-semibold border-b-2 border-[#205C9E]' : 'text-gray-500 hover:text-[#4A90E2] hover:border-b-2 hover:border-[#4A90E2]' }}"
|
|
aria-current="page">Home</a>
|
|
</li>
|
|
|
|
<!-- Menu "Wisata" -->
|
|
<li>
|
|
<a href="/wisata"
|
|
class="block py-2 px-3 rounded md:bg-transparent md:p-0 transition-all duration-300 ease-in-out font-poppins transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95
|
|
{{ request()->is('wisata*') ? 'text-[#205C9E] font-semibold border-b-2 border-[#205C9E]' : 'text-gray-500 hover:text-[#4A90E2] hover:border-b-2 hover:border-[#4A90E2]' }}">
|
|
Wisata
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Menu "Peta Wilayah" -->
|
|
<li>
|
|
<a href="/petaWilayah"
|
|
class="block py-2 px-3 rounded md:bg-transparent md:p-0 transition-all duration-300 ease-in-out font-poppins transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95
|
|
{{ request()->is('petaWilayah*') ? 'text-[#205C9E] font-semibold border-b-2 border-[#205C9E]' : 'text-gray-500 hover:text-[#4A90E2] hover:border-b-2 hover:border-[#4A90E2]' }}">
|
|
Peta Wilayah
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<li>
|
|
@auth
|
|
|
|
<div class="relative">
|
|
<!-- Tombol User Menu -->
|
|
<button type="button"
|
|
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95"
|
|
id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown"
|
|
data-dropdown-placement="bottom">
|
|
<span class="sr-only font-poppins">Open user menu</span>
|
|
<img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg"
|
|
alt="user photo">
|
|
</button>
|
|
|
|
<!-- Dropdown Menu -->
|
|
<div class="z-50 hidden my-4 text-base list-none bg-gray-200 divide-y divide-gray-100 rounded-lg shadow-sm font-poppinsprofi"
|
|
id="user-dropdown">
|
|
<div class="px-4 py-3">
|
|
<span class="block text-sm text-gray-900 ">{{ Auth::user()->name }}</span>
|
|
<span class="block text-sm text-gray-500 truncate ">{{ Auth::user()->email }}</span>
|
|
</div>
|
|
<ul class="py-2" aria-labelledby="user-menu-button">
|
|
<!-- Menu "Dashboard" -->
|
|
<li>
|
|
<a href="{{ route('dashboard') }}"
|
|
class="block px-4 py-2 text-sm transition-all duration-300 ease-in-out transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95
|
|
{{ request()->is('dashboard') ? 'text-[#205C9E] font-semibold border-b-2 border-[#205C9E]' : 'text-gray-500 hover:text-[#4A90E2] hover:border-b-2 hover:border-[#4A90E2]' }}">
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Menu "Settings" -->
|
|
<li>
|
|
<a href="#"
|
|
class="block px-4 py-2 text-sm transition-all duration-300 ease-in-out transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95
|
|
{{ request()->is('settings') ? 'text-[#205C9E] font-semibold border-b-2 border-[#205C9E]' : 'text-gray-500 hover:text-[#4A90E2] hover:border-b-2 hover:border-[#4A90E2]' }}">
|
|
Settings
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Menu "Sign out" -->
|
|
<li>
|
|
<a href="{{ route('logout') }}"
|
|
class="block px-4 py-2 text-sm transition-all duration-300 ease-in-out transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95
|
|
{{ request()->is('logout') ? 'text-[#205C9E] font-semibold border-b-2 border-[#205C9E]' : 'text-gray-500 hover:text-[#4A90E2] hover:border-b-2 hover:border-[#4A90E2]' }}">
|
|
Sign out
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@endauth
|
|
@guest
|
|
<a href="/login"
|
|
class="block py-2 px-3 rounded md:bg-transparent md:p-0 transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95
|
|
{{ request()->is('login*') ? 'text-[#205C9E] font-semibold' : 'text-[#205C9E] hover:text-[#4A90E2]' }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" x="0" y="0"
|
|
viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve"
|
|
class="transition-colors duration-300 fill-current">
|
|
<g>
|
|
<g fill-rule="evenodd">
|
|
<path
|
|
d="M11.55.815a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5zM15.719 12.09c.485-.55 1.199-.9 1.993-.9h1.908a2.658 2.658 0 0 1 2.658 2.659v6.678a2.658 2.658 0 0 1-2.658 2.658h-1.908c-.794 0-1.508-.35-1.993-.9a.75.75 0 1 1 1.124-.992c.213.241.523.392.869.392h1.908c.64 0 1.158-.519 1.158-1.158v-6.678c0-.64-.518-1.159-1.158-1.159h-1.908c-.346 0-.656.151-.869.393a.75.75 0 0 1-1.125-.993z">
|
|
</path>
|
|
<path
|
|
d="M17.935 16.657a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 0 1-1.061-1.06l2-2a.75.75 0 0 1 1.06 0z">
|
|
</path>
|
|
<path
|
|
d="M17.935 17.718a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 0 0-1.061 1.06l2 2a.75.75 0 0 0 1.06 0z">
|
|
</path>
|
|
<path
|
|
d="M11.154 17.188a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75z">
|
|
</path>
|
|
</g>
|
|
<path
|
|
d="M13.788 13.622a18.9 18.9 0 0 0-11.17 2.07c-.542.288-.88.85-.88 1.464v3.672c0 .966.783 1.75 1.75 1.75h10.685a2.258 2.258 0 0 1-.02-1.52 2.254 2.254 0 0 1-.985-1.62h-1.264a2.25 2.25 0 1 1 0-4.5h1.264a2.24 2.24 0 0 1 .62-1.316z">
|
|
</path>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
@endguest
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
document.addEventListener("scroll", function() {
|
|
let navbar = document.getElementById("navbar");
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add("bg-opacity-70", "backdrop-blur-md");
|
|
navbar.classList.remove("bg-opacity-100");
|
|
} else {
|
|
navbar.classList.add("bg-opacity-100");
|
|
navbar.classList.remove("bg-opacity-70", "backdrop-blur-md");
|
|
}
|
|
});
|
|
</script>
|