mirror of
https://github.com/kevin-DL/InertiaJS-Vue3-Tailwind-CSS-AdonisJS.git
synced 2026-01-11 10:54:25 +00:00
58 lines
2.7 KiB
Vue
58 lines
2.7 KiB
Vue
<template>
|
|
<nav class="bg-gray-800">
|
|
<div class="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div class="relative flex items-center justify-between h-16">
|
|
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
|
<!-- Mobile menu button-->
|
|
<button class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
|
|
<svg class="block w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
|
|
<svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center justify-center flex-1 sm:items-stretch sm:justify-start">
|
|
<div class="flex items-center flex-shrink-0">
|
|
<img class="block w-auto h-8 lg:hidden" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
|
|
<img class="hidden w-auto h-8 lg:block" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
|
|
</div>
|
|
<div class="hidden sm:block sm:ml-6">
|
|
<div class="flex space-x-4">
|
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
|
<inertia-link href="/" class="px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-md">Home</inertia-link>
|
|
<inertia-link href="/about" class="px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white">About</inertia-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
Mobile menu, toggle classes based on menu state.
|
|
|
|
Menu open: "block", Menu closed: "hidden"
|
|
-->
|
|
<div class="hidden sm:hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1">
|
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
|
<a href="/" class="block px-3 py-2 text-base font-medium text-white bg-gray-900 rounded-md">Home</a>
|
|
<a href="/about" class="block px-3 py-2 text-base font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white">About</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |