navbar component and some main.css changes
This commit is contained in:
María
124
components/NavBar.vue
Normal file
124
components/NavBar.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<nav class="relative">
|
||||
<div class="mx-auto flex justify-between items-center h-20">
|
||||
<!-- Logo -->
|
||||
<NuxtLink to="/">
|
||||
<img
|
||||
width="121.22628021240234"
|
||||
height="48"
|
||||
alt="logo-kit-economia-social"
|
||||
src="/assets/img/LOGO-KIT_horizontal_positivo_color.jpg"
|
||||
/>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Desktop menu -->
|
||||
<ul class="hidden lg:flex items-center gap-6 font-semibold text-sm">
|
||||
<li><NuxtLink to="/" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">INICIO</NuxtLink></li>
|
||||
<li><NuxtLink to="/nosotras" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">NOSOTRAS</NuxtLink></li>
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="relative" ref="dropdownRef">
|
||||
<button
|
||||
class="hover:bg-button-hover hover:text-white p-2 rounded-lg cursor-pointer"
|
||||
@click="handleDropdown">
|
||||
HERRAMIENTAS
|
||||
</button>
|
||||
<transition
|
||||
enter-active-class="transition duration-300 ease-out"
|
||||
enter-from-class="opacity-0 scale-95"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="transition duration-200 ease-in"
|
||||
leave-from-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-95"
|
||||
>
|
||||
<ul
|
||||
v-show="dropdownOpen"
|
||||
class="absolute right-0 mt-2 w-56 bg-white rounded-3xl shadow-lg p-4 space-y-2 z-50 text-sm text-center"
|
||||
>
|
||||
<li><NuxtLink to="/consumo" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
|
||||
<li><NuxtLink to="/aula-virtual" class="block hover:bg-button hover:text-white px-2 py-1">AULA VIRTUAL</NuxtLink></li>
|
||||
<li><NuxtLink to="/iguales" class="block hover:bg-button hover:text-white px-2 py-1">IGUALES</NuxtLink></li>
|
||||
<li><NuxtLink to="/ods" class="block hover:bg-button hover:text-white px-2 py-1">ODS</NuxtLink></li>
|
||||
<li><NuxtLink to="/certifica" class="block hover:bg-button hover:text-white px-2 py-1">CERTIFICA-T</NuxtLink></li>
|
||||
<li><NuxtLink to="/foro" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">FORO</NuxtLink></li>
|
||||
</ul>
|
||||
</transition>
|
||||
</li>
|
||||
|
||||
<!-- CTA -->
|
||||
<li>
|
||||
<NuxtLink to="/aula" >
|
||||
<ButtonCTA color="aula-base" size="lg">
|
||||
AULA VIRTUAL
|
||||
</ButtonCTA>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Mobile menu toggle -->
|
||||
<button
|
||||
class="lg:hidden focus:outline-none"
|
||||
@click="handleMenu">
|
||||
<svg v-if="!menuIsOpen" 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"><path d="M3 12h18"/><path d="M3 18h18"/><path d="M3 6h18"/></svg>
|
||||
<svg v-if="menuIsOpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<transition
|
||||
enter-active-class="transition duration-300 ease-out"
|
||||
enter-from-class="opacity-0 translate-x-2"
|
||||
enter-to-class="opacity-100 translate-x-0"
|
||||
leave-active-class="transition duration-200 ease-in"
|
||||
leave-from-class="opacity-100 translate-x-0"
|
||||
leave-to-class="opacity-0 translate-x-2"
|
||||
>
|
||||
<div v-show="menuIsOpen" class="lg:hidden p-5 bg-gradient-conic rounded-3xl min-h-svh">
|
||||
<ul class="space-y-4 text-sm text-end w-fit ml-auto">
|
||||
<li class="p-2"><NuxtLink to="/">INICIO</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="/nosotras">NOSOTRAS</NuxtLink></li>
|
||||
<li class="p-2 border-b">HERRAMIENTAS</li>
|
||||
<li class="p-2"><NuxtLink to="/consumo">CONSUMO CUIDADO</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="/aula">AULA VIRTUAL</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="/iguales">IGUALES</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="/ods">ODS</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="/certifica">CERTIFICA-T</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="/foro">FORO</NuxtLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dropdownOpen: false,
|
||||
// mobileMenuOpen: false,
|
||||
menuIsOpen: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
methods: {
|
||||
handleDropdown() {
|
||||
this.dropdownOpen = !this.dropdownOpen;
|
||||
},
|
||||
handleClickOutside(e) {
|
||||
const dropdown = this.$refs.dropdownRef;
|
||||
if (dropdown && !dropdown.contains(e.target)) {
|
||||
this.dropdownOpen = false;
|
||||
}
|
||||
},
|
||||
handleMenu() {
|
||||
this.menuIsOpen = !this.menuIsOpen;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user