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>
<nav class="navbar navbar-expand-lg nav-style">
<div class="container-fluid">
<!-- Logo -->
<a class="navbar-brand ms-2">
<img src="/src/assets/nombre.jpg" alt="Logo" width="180" height="28">
</a>
<!-- Perfil -->
<div class="d-flex align-items-center order-lg-2">
<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><a class="dropdown-item" href="#!">Cerrar sesión</a></li>
</ul>
</li>
</ul>
<!-- Botón despliegue enlaces -->
<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" >
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Contenido desplegable -->
<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">
<template>
<nav class="navbar navbar-expand-lg nav-style">
<div class="container-fluid">
<a class="navbar-brand me-auto" href="/">
<img src="/src/assets/logo-name.jpg" alt="Logo" width="240" height="32">
</a>
<div class="d-flex align-items-center d-lg-none">
<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">
<span class="navbar-toggler-icon"></span>
</button>
<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 class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 nav nav-pills nav-fill">
<li class="nav-item">
<router-link to="/auth/login" class="nav-link" active-class="active">Inicio de sesión</router-link>
</li>
<router-link to="/recipes" class="nav-link" active-class="active">Mis recetas</router-link>
</li>
<li class="nav-item">
<router-link to="/recipes/create" class="nav-link" active-class="active">Crear receta</router-link>
</li>
<li class="nav-item">
<router-link to="/recipes" class="nav-link" active-class="active">Mis recetas</router-link>
</li>
</li>
<li class="nav-item">
<router-link to="/recipes/search" class="nav-link" active-class="active">Búsqueda avanzada</router-link>
</li>
</ul>
<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"/>
<button class="btn btn-search" type="submit">
<i class="bi bi-search"></i>
</button>
</form>
</div>
</div>
</nav>
</li>
</ul>
<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"/>
<button class="btn btn-search" type="submit">
<i class="bi bi-search"></i>
</button>
</form>
</div>
<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>
<script setup>
import { defineProps } from 'vue';
import { useAuthStore } from '@/stores/authStore';
import { useRouter } from 'vue-router';
const props = defineProps({
showSearch: {
......@@ -65,6 +80,14 @@ const props = defineProps({
default: false
}
})
const authStore = useAuthStore();
const router = useRouter();
async function handleLogout() {
await authStore.logout();
router.push('/auth/login');
}
</script>
<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