|
<div x-data="{ open: false }"> |
|
|
|
<!-- This is the top navbar, and it is shown on both desktop and mobile --> |
|
<div class="bg-gray-800 py-2 px-4 flex items-center justify-between"> |
|
<div class="text-2xl font-bold text-white"> |
|
AcmeCorp |
|
</div> |
|
<div class="block sm:hidden"> |
|
<button @click="open = !open" class="text-white font-semibold hover:underline focus:outline-none focus:underline">Menu</button> |
|
</div> |
|
<div class="hidden sm:block"> |
|
<a href="#" class="text-white font-semibold">Home</a> |
|
<a href="#" class="ml-4 text-white font-semibold">Team</a> |
|
<a href="#" class="ml-4 text-white font-semibold">Projects</a> |
|
<a href="#" class="ml-4 text-white font-semibold">Settings</a> |
|
</div> |
|
</div> |
|
|
|
<!-- |
|
This is the mobile drawer, only shown on mobile |
|
You can delete this entire block of HTML and replace |
|
it with a different mobile menu without touching the |
|
top nav at all if you like. |
|
--> |
|
<div :class="{'hidden': !open, 'block': open }" class="hidden bg-gray-800 px-4 pt-2 pb-6 sm:hidden"> |
|
<a href="#" class="block text-white font-semibold">Home</a> |
|
<a href="#" class="mt-2 block text-white font-semibold">Team</a> |
|
<a href="#" class="mt-2 block text-white font-semibold">Projects</a> |
|
<a href="#" class="mt-2 block text-white font-semibold">Settings</a> |
|
</div> |
|
|
|
|
|
<!-- |
|
Here's an off-canvas menu you can swap it for for example, |
|
just uncomment this div and comment out the one above. |
|
--> |
|
<!-- <div class="sm:hidden"> |
|
<div @click="open = false" :class="{ 'hidden': !open, 'block': open }" class="fixed inset-0 bg-black opacity-50"></div> |
|
<div :class="{ 'translate-x-0': open, '-translate-x-full': !open }" class="fixed inset-y-0 left-0 w-64 transform -translate-x-full transition-transform duration-200 ease-in-out bg-gray-800 px-4 pt-2 pb-6"> |
|
<a href="#" class="block text-white font-semibold">Home</a> |
|
<a href="#" class="mt-2 block text-white font-semibold">Team</a> |
|
<a href="#" class="mt-2 block text-white font-semibold">Projects</a> |
|
<a href="#" class="mt-2 block text-white font-semibold">Settings</a> |
|
</div> |
|
</div> --> |
|
|
|
</div> |
