Skip to content

Alba María Álvarez / front_recipes

Go to a project
Commit 13c51ea9 by Alba María Álvarez
Options

perf(Header): cambio de logo y ajuste de la estructura para desacoplar enlaces

parent 8dd54fc4
Inline Side-by-side
Showing with 75 additions and 52 deletions
src/components/Header.vue
<template> <template>
<nav class="navbar navbar-expand-lg nav-style"> <nav class="navbar navbar-expand-lg nav-style">
<div class="container-fluid"> <div class="container-fluid">
<!-- Logo -->
<a class="navbar-brand ms-2"> <a class="navbar-brand me-auto" href="/">
<img src="/src/assets/nombre.jpg" alt="Logo" width="180" height="28"> <img src="/src/assets/logo-name.jpg" alt="Logo" width="240" height="32">
</a> </a>
<!-- Perfil --> <div class="d-flex align-items-center d-lg-none">
<div class="d-flex align-items-center order-lg-2"> <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<ul class="navbar-nav ms-auto"> <span class="navbar-toggler-icon"></span>
<li class="nav-item dropdown"> </button>
<button class="btn btn-profile dropdown-toggle" id="navbarDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle fs-4"></i> <ul class="navbar-nav ms-auto">
</button> <li class="nav-item dropdown">
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"> <button class="btn btn-profile dropdown-toggle" id="navbarDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<li><a class="dropdown-item" href="/users/management">Gestión</a></li> <i class="bi bi-person-circle fs-4"></i>
<li><a class="dropdown-item" href="/users/detail">Mis datos</a></li> </button>
<li><hr class="dropdown-divider" /></li> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">Cerrar sesión</a></li> <li><a class="dropdown-item" href="/users/management">Gestión</a></li>
</ul> <li><a class="dropdown-item" href="/users/detail">Mis datos</a></li>
</li> <li><hr class="dropdown-divider" /></li>
</ul> <li>
<button class="dropdown-item" @click="handleLogout">Cerrar sesión</button>
<!-- Botón despliegue enlaces --> </li>
<button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > </ul>
<span class="navbar-toggler-icon"></span> </li>
</button> </ul>
</div> </div>
<!-- Contenido desplegable --> <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<div class="collapse navbar-collapse justify-content-center order-lg-1" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0 nav nav-pills nav-fill">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 nav nav-pills nav-fill">
<li class="nav-item"> <li class="nav-item">
<router-link to="/auth/login" class="nav-link" active-class="active">Inicio de sesión</router-link> <router-link to="/recipes" class="nav-link" active-class="active">Mis recetas</router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link to="/recipes/create" class="nav-link" active-class="active">Crear receta</router-link> <router-link to="/recipes/create" class="nav-link" active-class="active">Crear receta</router-link>
</li> </li>
<li class="nav-item">
<router-link to="/recipes" class="nav-link" active-class="active">Mis recetas</router-link>
</li>
<li class="nav-item"> <li class="nav-item">
<router-link to="/recipes/search" class="nav-link" active-class="active">Búsqueda avanzada</router-link> <router-link to="/recipes/search" class="nav-link" active-class="active">Búsqueda avanzada</router-link>
</li> </li>
</ul> </ul>
<form v-if="props.showSearch" class="d-flex my-2 my-lg-0"> <form v-if="props.showSearch" class="d-flex my-2 my-lg-0">
<input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search"/> <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search"/>
<button class="btn btn-search" type="submit"> <button class="btn btn-search" type="submit">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
</button> </button>
</form> </form>
</div> </div>
</div>
</nav> <div class="d-none d-lg-flex align-items-center">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<button class="btn btn-profile dropdown-toggle" id="navbarDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle fs-4"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/users/management">Gestión</a></li>
<li><a class="dropdown-item" href="/users/detail">Mis datos</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<button class="dropdown-item" @click="handleLogout">Cerrar sesión</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</template> </template>
<script setup> <script setup>
import { defineProps } from 'vue'; import { useAuthStore } from '@/stores/authStore';
import { useRouter } from 'vue-router';
const props = defineProps({ const props = defineProps({
showSearch: { showSearch: {
...@@ -65,6 +80,14 @@ const props = defineProps({ ...@@ -65,6 +80,14 @@ const props = defineProps({
default: false default: false
} }
}) })
const authStore = useAuthStore();
const router = useRouter();
async function handleLogout() {
await authStore.logout();
router.push('/auth/login');
}
</script> </script>
<style scoped> <style scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment