se destaca link en navbar

src/assets/login.css

@@ -0,0 +1,24 @@
+.login {
+    width: 700px;
+    max-width: 100%;
+    margin: auto;
+    border: 1px #ddd solid;
+    padding: 2rem;
+}
+
+.login .field {
+    margin-bottom: 1rem;
+}
+
+.login .field input {
+    width: 100%;
+}
+
+.login input,
+.login button {
+    min-height: 2rem;
+}
+
+.login .message {
+    color: orange;
+}

src/assets/navbar.css

@@ -21,4 +21,16 @@
 /* Change the link color to #111 (black) on hover */
 .navbar li a:hover {
     background-color: #111;
+}
+
+.navbar li.active a {
+    background-color: aqua;
+    color: black;
+}
+
+.navbar .canasta {
+    background-color: white;
+    padding: 5px 16px;
+    color: steelblue;
+    border: 1px solid black;
 }

src/layouts/NavLink.svelte

@@ -0,0 +1,19 @@
+<script>
+    import { Link, useMatch } from 'svelte-navigator'
+
+    export let to = '#'
+    const absoluteMatch = useMatch(to)
+
+    let match;
+    let allow = false;
+    $: match = $absoluteMatch?.fullPath === to;
+    allow = true;
+</script>
+
+{#if allow}
+    <li class={match ? ' active' : ''}>
+        <Link {to}>
+            <slot />
+        </Link>
+    </li>
+{/if}

src/layouts/Navbar.svelte

@@ -1,6 +1,6 @@
 <script>
     import '../assets/navbar.css'
-    import { Link } from 'svelte-navigator'
+    import NavLink from './NavLink.svelte';
     import { storeCanasta } from '../stores/canasta';
     import { runLogout } from '../services/auth';
 
@@ -16,13 +16,16 @@
 
 <div class="navbar">
     <ul>
-        <li><Link to="/">Home</Link></li>
-        <li><Link to="/about">About</Link></li>
-        <li><Link to="/contact">Contact</Link></li>
-        <li><Link to="/productos">Productos</Link></li>
-        <li><Link to="/compras">Compras</Link></li>
-        <li style="color: white;">Itemes comprados:<br>{$storeCanasta.cantidad} - ${$storeCanasta.monto}</li>
+        <NavLink to="/">Home</NavLink>
+        <NavLink to="/about">About</NavLink>
+        <NavLink to="/contact">Contact</NavLink>
+        <NavLink to="/productos">Productos</NavLink>
+        <NavLink to="/compras">Compras</NavLink>
         <li><a href={"#"} on:click|preventDefault={() => onSalir()}>Salir</a></li>
+        <li class="canasta">
+            Itemes comprados:<br>
+            {$storeCanasta.cantidad} - ${$storeCanasta.monto}
+        </li>
     </ul>
 </div>
 <hr>

src/main.js

@@ -8,10 +8,11 @@ let app;
 async function begin() {
   try {
     const data = await getInfoToken()
+    if (!data) throw "";
     storeUsuario.set(data)
     app = new App({ target: document.getElementById('app') })
   } catch (error) {
-    console.log(error.detail || error)
+    sessionStorage.setItem('login-message', error.detail || error)
     app = new AppLogin({ target: document.getElementById('app') })
   }
 }

src/pages/site/Login.svelte

@@ -1,9 +1,12 @@
 <script>
+    import '../../assets/login.css'
     import { runLogin } from "../../services/auth";
 
     let form = { username:null, password: null }
     let loading = false;
-    let message = '';
+    let message = sessionStorage.getItem('login-message');
+    sessionStorage.removeItem('login-message');
+    document.cookie = 'token=';
 
     async function onSubmit() {
         try {
@@ -24,17 +27,17 @@
 </svelte:head>
 
 <h1>Login</h1>
-<div>
+<div class="login">
     {#if loading}
         <p>Espere un momento...</p>
     {/if}
     
     <form action="" on:submit|preventDefault={() => onSubmit()}>
-        <div>
+        <div class="field">
             <label for="">Usuario</label>
             <input type="text" bind:value={form.username}>
         </div>
-        <div>
+        <div class="field">
             <label for="">Contraseña</label>
             <input type="password" bind:value={form.password}>
         </div>
@@ -42,6 +45,6 @@
     </form>
 
     {#if message}
-        <p>{message}</p>
+        <p class="message">{message}</p>
     {/if}
 </div>

src/services/auth.js

@@ -27,6 +27,7 @@ export async function getInfoToken() {
         credentials: 'include'
     })
     if (!res.ok) throw await res.json()
-    return await res.json()
+    const data = await res.text(); // puede venir vacio si no existe token
+    return data ? JSON.parse(data) : null;
 }