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,126 +1,166 @@
 <script lang="ts">
-  import { Navbar, NavbarBrand, NavbarToggler, Nav, Collapse } from "@sveltestrap/sveltestrap";
-  import { onMount } from "svelte";
-  import { writable } from 'svelte/store';
-  import { link, links } from "svelte-routing";
-  import './css/popup.css';
-  import type { Grupo } from "../types";
+    import {
+        Navbar,
+        NavbarBrand,
+        NavbarToggler,
+        Nav,
+        Collapse,
+        Button,
+    } from "@sveltestrap/sveltestrap";
+    import { onMount } from "svelte";
+    import { writable } from "svelte/store";
+    import { link, links } from "svelte-routing";
+    import "./css/popup.css";
+    import type { Grupo } from "../types";
 
-	import { urlG } from "../stores/urlStore";
+    import { urlG } from "../stores/urlStore";
     import { navigate } from "svelte-routing";
-  
-  let isOpen: boolean = $state(false);
-  let hayNotis:boolean = $state(false);
 
-  const permisos = writable<Grupo[]>([]);
-  const email = localStorage.getItem('email');
-  const token = sessionStorage.getItem('token');
+    let isOpen: boolean = $state(false);
+    let hayNotis: boolean = $state(false);
 
-  async function obtenerPermisos(){
-    try {
-      const response = await fetch(String($urlG)+"/api/acciones",{
-        method: 'GET',
-        headers: {
-          'Auth' : String(token),
-          'Email' : String(email),
-          'Content-Type' : "application/json"
-        },
-      });
-      if (response.ok){
-        const json  = await response.json();
-        
-        permisos.set(json);
-      }
-    } catch (e) {
-      console.error(e);
- 
-    }
-  }
-  
-  onMount( () => {
-     obtenerPermisos();
-     obtenerNotis();
-  })
+    const permisos = writable<Grupo[]>([]);
+    const email = localStorage.getItem("email");
+    const token = sessionStorage.getItem("token");
 
-  async function obtenerNotis() {
-    try {
-      const responce = await fetch($urlG+"/api/notificaciones/haySinLeer", {
-        method: "GET",
-        headers: {
-          "Auth": String(token)
+    async function obtenerPermisos() {
+        try {
+            const response = await fetch(String($urlG) + "/api/acciones", {
+                method: "GET",
+                headers: {
+                    Auth: String(token),
+                    Email: String(email),
+                    "Content-Type": "application/json",
+                },
+            });
+            if (response.ok) {
+                const json = await response.json();
+
+                permisos.set(json);
+            }
+        } catch (e) {
+            console.error(e);
         }
-      });
-      if(responce.ok) {
-        let data = await responce.json();
-        hayNotis = data.message;
-        return;
-      }
-    } catch (e) {
-      console.error(e);
- 
     }
-  }
 
-  function redirijir(path: string){
-    navigate(path);
-  }
+    onMount(() => {
+        obtenerPermisos();
+        obtenerNotis();
+    });
 
-  let theme = $state(localStorage.getItem("theme") ?? "light"); 
-  const toggleTheme = () => {
-    theme = theme === "light" ? "dark" : "light";
-    document.body.setAttribute("data-bs-theme", theme);
-    localStorage.setItem("theme", theme);
-  };
+    async function obtenerNotis() {
+        try {
+            const responce = await fetch(
+                $urlG + "/api/notificaciones/haySinLeer",
+                {
+                    method: "GET",
+                    headers: {
+                        Auth: String(token),
+                    },
+                },
+            );
+            if (responce.ok) {
+                let data = await responce.json();
+                hayNotis = data.message;
+                return;
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    }
 
+    function redirijir(path: string) {
+        navigate(path);
+    }
+
+    let theme = $state(localStorage.getItem("theme") ?? "light");
+    const toggleTheme = () => {
+        theme = theme === "light" ? "dark" : "light";
+        document.body.setAttribute("data-bs-theme", theme);
+        localStorage.setItem("theme", theme);
+    };
+
+    function cerrarSesion() {
+        localStorage.removeItem("email");
+        sessionStorage.removeItem("token");
+        navigate("/");
+    }
 </script>
 
 <Navbar container="xxl" expand="md" color="dark-subtle">
-  <NavbarBrand href="/">
-    AlquilaFacil
-  </NavbarBrand>
-  <div>
-    <div class="badge" style="background-color: turquoise;" use:links>
-      <a href="/Menu">
-        <img src="/home.svg" alt="Volver al Menú"/>
-      </a>
-    </div>
-    <button class="badge btn" onclick={toggleTheme} style="background-color: cadetblue;">
-      {#if theme === "light" }
-      <img src="/toggle-left.svg" alt=""/>
-      {:else}
-      <img src="/toggle-right.svg" alt=""/>
-      {/if}
-    </button>
-    <button 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="visually-hidden">unread messages</span>
-      </span>
-      {/if}
-
-    </button>
-  </div>
-  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
-  <Collapse isOpen={isOpen} navbar expand="md">
-    <Nav class="ms-auto" navbar >
-    {#each $permisos as item }
-      <div class="dropdown">
-        <div class="btn-group" 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>
-            <li><hr class="dropdown-divider"></li>
-            {/each}
-          </ul>
+    <NavbarBrand href="/">AlquilaFacil</NavbarBrand>
+    <div class="d-flex gap-2">
+        <div class="badge" style="background-color: turquoise;" use:links>
+            <a href="/Menu">
+                <img src="/home.svg" alt="Volver al Menú" />
+            </a>
         </div>
-      </div>
-    {/each}
-    </Nav>
-  </Collapse>
+        <button
+            class="badge btn"
+            onclick={toggleTheme}
+            style="background-color: cadetblue;"
+        >
+            {#if theme === "light"}
+                <img src="/toggle-left.svg" alt="" />
+            {:else}
+                <img src="/toggle-right.svg" alt="" />
+            {/if}
+        </button>
+        <button
+            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="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} navbar expand="md">
+        <Nav class="ms-auto" navbar>
+            {#each $permisos as item}
+                <div class="dropdown">
+                    <div
+                        class="btn-group"
+                        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
+                                >
+                                <li><hr class="dropdown-divider" /></li>
+                            {/each}
+                        </ul>
+                    </div>
+                </div>
+            {/each}
+        </Nav>
+    </Collapse>
 </Navbar>