farmstar-survey-ui/components/App/AppNavbar.vue

73 lines
2.3 KiB
Vue
Raw Normal View History

2024-01-19 10:51:33 +01:00
<template>
<nav class="border-gray-200 bg-gray-900">
<div
class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
>
<NuxtLink to="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span
class="self-center text-2xl font-semibold whitespace-nowrap text-white"
>FarmStar Survey</span
></NuxtLink
>
<button
@click="toggleMenu"
data-collapse-toggle="navbar-default"
type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
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: !isMenuOpen, 'lg:flex': isMenuOpen }"
class="w-full md:block md:w-auto"
id="navbar-default"
>
<ul
class="font-medium flex flex-col p-4 md:p-0 mt-4 border rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 bg-gray-900 border-gray-700"
>
<li>
<NuxtLink
to="/about"
class="block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
>About</NuxtLink
>
</li>
<li>
<NuxtLink
to="/help"
class="block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
>Help</NuxtLink
>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script setup>
const isMenuOpen = ref(false);
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value;
};
</script>