<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel</title>
@vite('resources/css/app.css')
</head>
<body class="bg-slate-100 font-sans">
<div class="relative min-h-screen md:flex">
<!-- Mobile Nav Toggle -->
<div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
<a href="#" class="block p-4 text-white font-bold">Admin Panel</a>
<button id="mobile-menu-button" class="p-4 focus:outline-none focus:bg-gray-700">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7">
</path>
</svg>
</button>
</div>
<!-- Sidebar -->
<aside id="sidebar"
class="bg-primary text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-300 ease-in-out z-30">
<!-- Logo/Header -->
<div class="h-16 flex items-center justify-center text-2xl font-bold">
Admin Panel
</div>
<!-- Navigation Links -->
<nav>
<ul class="flex flex-col space-y-2">
<li>
<a href=""
class="flex items-center p-3 rounded-lg @if(request()->routeIs('admin.dashboard')) bg-white text-purple-800 font-semibold @else hover:bg-purple-700 transition duration-200 @endif">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
</path>
</svg>
<span>Dashboard</span>
</a>
</li>
<li>
<a href=""
class="flex items-center p-3 rounded-lg @if(request()->routeIs('admin.vehicle')) bg-white text-purple-800 font-semibold @else hover:bg-purple-700 transition duration-200 @endif">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-6 h-6 mr-3">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
<path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
<path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
</svg>
<span>Vehicles</span>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-3 rounded-lg hover:bg-[#4d2fbc] transition duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-6 h-6 mr-3">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 9a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
<path d="M4 16v2a2 2 0 0 0 2 2h2" />
<path d="M16 4h2a2 2 0 0 1 2 2v2" />
<path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
<path d="M8 16a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2" />
</svg>
<span>Admin</span>
</a>
</li>
<li>
<a href=""
class="flex items-center p-3 rounded-lg @if(request()->routeIs('admin.profile')) bg-white text-purple-800 font-semibold @else hover:bg-purple-700 transition duration-200 @endif">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.096 2.572-1.065z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Settings</span>
</a>
</li>
<li>
<form action="" method="POST"
class="flex items-center p-3 rounded-lg hover:bg-[#4d2fbc] transition duration-200 ">
@csrf
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-6 h-6 mr-3">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
<path d="M9 12h12l-3 -3" />
<path d="M18 15l3 -3" />
</svg>
<button type="submit" class="text-left w-full cursor-pointer">Logout</button>
</form>
</li>
</ul>
</nav>
</aside>
<!-- Main Content -->
@yield('content')
</div>
<script>
const menuButton = document.getElementById('mobile-menu-button');
const sidebar = document.getElementById('sidebar');
menuButton.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
});
</script>
</body>
</html>
