añadido boton para cerrar sesion

Front/public/logout.svg

@@ -0,0 +1,21 @@
+<!--
+category: System
+tags: [exit, shut, unplug, close]
+version: "1.4"
+unicode: "eba8"
+-->
+<svg
+  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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
+  <path d="M9 12h12l-3 -3" />
+  <path d="M18 15l3 -3" />
+</svg>

Front/src/Componentes/NavBarAutocompletable.svelte

@@ -1,67 +1,75 @@
 <script lang="ts">
-  import { Navbar, NavbarBrand, NavbarToggler, Nav, Collapse } from "@sveltestrap/sveltestrap";
+    import {
+        Navbar,
+        NavbarBrand,
+        NavbarToggler,
+        Nav,
+        Collapse,
+        Button,
+    } from "@sveltestrap/sveltestrap";
     import { onMount } from "svelte";
-  import { writable } from 'svelte/store';
+    import { writable } from "svelte/store";
     import { link, links } from "svelte-routing";
-  import './css/popup.css';
+    import "./css/popup.css";
     import type { Grupo } from "../types";
 
     import { urlG } from "../stores/urlStore";
     import { navigate } from "svelte-routing";
 
     let isOpen: boolean = $state(false);
-  let hayNotis:boolean = $state(false);
+    let hayNotis: boolean = $state(false);
 
     const permisos = writable<Grupo[]>([]);
-  const email = localStorage.getItem('email');
+    const email = localStorage.getItem("email");
-  const token = sessionStorage.getItem('token');
+    const token = sessionStorage.getItem("token");
 
-  async function obtenerPermisos(){
+    async function obtenerPermisos() {
         try {
-      const response = await fetch(String($urlG)+"/api/acciones",{
+            const response = await fetch(String($urlG) + "/api/acciones", {
-        method: 'GET',
+                method: "GET",
                 headers: {
-          'Auth' : String(token),
+                    Auth: String(token),
-          'Email' : String(email),
+                    Email: String(email),
-          'Content-Type' : "application/json"
+                    "Content-Type": "application/json",
                 },
             });
-      if (response.ok){
+            if (response.ok) {
                 const json = await response.json();
 
                 permisos.set(json);
             }
         } catch (e) {
             console.error(e);
- 
         }
     }
 
-  onMount( () => {
+    onMount(() => {
         obtenerPermisos();
         obtenerNotis();
-  })
+    });
 
     async function obtenerNotis() {
         try {
-      const responce = await fetch($urlG+"/api/notificaciones/haySinLeer", {
+            const responce = await fetch(
+                $urlG + "/api/notificaciones/haySinLeer",
+                {
                     method: "GET",
                     headers: {
-          "Auth": String(token)
+                        Auth: String(token),
-        }
+                    },
-      });
+                },
-      if(responce.ok) {
+            );
+            if (responce.ok) {
                 let data = await responce.json();
                 hayNotis = data.message;
                 return;
             }
         } catch (e) {
             console.error(e);
- 
         }
     }
 
-  function redirijir(path: string){
+    function redirijir(path: string) {
         navigate(path);
     }
 
@@ -72,50 +80,82 @@
         localStorage.setItem("theme", theme);
     };
 
+    function cerrarSesion() {
+        localStorage.removeItem("email");
+        sessionStorage.removeItem("token");
+        navigate("/");
+    }
 </script>
 
 <Navbar container="xxl" expand="md" color="dark-subtle">
-  <NavbarBrand href="/">
+    <NavbarBrand href="/">AlquilaFacil</NavbarBrand>
-    AlquilaFacil
+    <div class="d-flex gap-2">
-  </NavbarBrand>
-  <div>
         <div class="badge" style="background-color: turquoise;" use:links>
             <a href="/Menu">
-        <img src="/home.svg" alt="Volver al Menú"/>
+                <img src="/home.svg" alt="Volver al Menú" />
             </a>
         </div>
-    <button class="badge btn" onclick={toggleTheme} style="background-color: cadetblue;">
+        <button
-      {#if theme === "light" }
+            class="badge btn"
-      <img src="/toggle-left.svg" alt=""/>
+            onclick={toggleTheme}
+            style="background-color: cadetblue;"
+        >
+            {#if theme === "light"}
+                <img src="/toggle-left.svg" alt="" />
             {:else}
-      <img src="/toggle-right.svg" alt=""/>
+                <img src="/toggle-right.svg" alt="" />
             {/if}
         </button>
-    <button class="badge btn btn-info position-relative" onclick={()=>navigate("/notificaciones")}>
+        <button
-      <img src="/bell.svg" alt="">
+            class="badge btn btn-info position-relative"
+            onclick={() => navigate("/notificaciones")}
+        >
+            <img src="/bell.svg" alt="" />
             {#if hayNotis}
-      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+                <span
+                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
+                >
                     !
                     <span class="visually-hidden">unread messages</span>
                 </span>
             {/if}
-
+        </button>
+        <div class="vr"></div>
+        <button class="badge btn btn-danger" onclick={cerrarSesion}>
+            <img src="/logout.svg" alt="CerrarSesion" />
         </button>
     </div>
+
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
-  <Collapse isOpen={isOpen} navbar expand="md">
+    <Collapse {isOpen} navbar expand="md">
-    <Nav class="ms-auto" navbar >
+        <Nav class="ms-auto" navbar>
-    {#each $permisos as item }
+            {#each $permisos as item}
                 <div class="dropdown">
-        <div class="btn-group" style="margin-left: 3px; margin-top: 3px">
+                    <div
-          <button class="btn btn-secondary" onclick={() => redirijir("/grupo/"+item.nombre)} >{item.nombre}</button>
+                        class="btn-group"
-          <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        style="margin-left: 3px; margin-top: 3px"
+                    >
+                        <button
+                            class="btn btn-secondary"
+                            onclick={() => redirijir("/grupo/" + item.nombre)}
+                            >{item.nombre}</button
+                        >
+                        <button
+                            class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                        >
                             <span class="visually-hidden">Toggle Dropdown</span>
                         </button>
                         <ul class="dropdown-menu dropdown-menu-end" use:links>
                             {#each item.idpermisos as perm}
-            <a class="dropdown-item link-underline-opacity-0 link-underline" href="/accion/{perm.id}" >{perm.descripcion}</a>
+                                <a
-            <li><hr class="dropdown-divider"></li>
+                                    class="dropdown-item link-underline-opacity-0 link-underline"
+                                    href="/accion/{perm.id}"
+                                    >{perm.descripcion}</a
+                                >
+                                <li><hr class="dropdown-divider" /></li>
                             {/each}
                         </ul>
                     </div>