fixed navigation not reflecting current route

src/lib/client/client.js

@@ -90,7 +90,6 @@ export class Client {
         }
         const user = await api.parseUser(data);
         console.log(`Logged in as @${user.username}@${user.host}`);
-        console.log(`You have ${data.source.follow_request_count} follow request${data.source.follow_request_count === 1 ? '' : 's'}!`);
         return user;
     }
 

src/lib/ui/Navigation.svelte

@@ -7,6 +7,7 @@
     import { getTimeline } from '$lib/timeline.js';
     import { goto } from '$app/navigation';
     import { get } from 'svelte/store';
+    import { onMount } from 'svelte';
 
     import TimelineIcon from '../../img/icons/timeline.svg';
     import NotificationsIcon from '../../img/icons/notifications.svg';
@@ -20,21 +21,33 @@
     import SettingsIcon from '../../img/icons/settings.svg';
     import LogoutIcon from '../../img/icons/logout.svg';
 
+    export let path;
+
     const VERSION = APP_VERSION;
     
     let notification_count = 0;
     if (notification_count > 99) notification_count = "99+";
 
-    function goTimeline() {
+    function handle_btn(name) {
-        if (location.pathname === "/") {
+        let route;
-            getTimeline(true);
+        switch (name) {
+            case "timeline":
+                route = "/";
+                break;
+            case "notifcations":
+            case "explore":
+            case "lists":
+            case "favourites":
+            case "bookmarks":
+            case "hashtags":
+                return;
+        }
+        if (!route) return;
         window.scrollTo({
             top: 0,
             behavior: "smooth"
         });
-            return;
+        goto(route);
-        }
-        goto("/");
     }
 
     async function log_out() {
@@ -52,13 +65,18 @@
     </header>
 
     <div id="nav-items">
-        <Button label="Timeline" on:click={() => goTimeline()} active={!!$client.user}>
+        <Button label="Timeline"
+                on:click={handle_btn("timeline")}
+                active={path == "/"}>
             <svelte:fragment slot="icon">
                 <TimelineIcon/>
             </svelte:fragment>
             Timeline
         </Button>
-        <Button label="Notifications" disabled>
+        <Button label="Notifications"
+                on:click={handle_btn("notifications")}
+                active={path == "/notifications"}
+                disabled>
             <svelte:fragment slot="icon">
                 <NotificationsIcon/>
             </svelte:fragment>

src/routes/+layout.svelte

@@ -5,12 +5,16 @@
     import { client, Client } from '$lib/client/client.js';
     import { get } from 'svelte/store';
 
+    export let data;
+    $: path = data.path || "/";
+
     let ready = new Promise(resolve => {
         if (get(client)) {
             return resolve();
         }
         let new_client = new Client();
         new_client.load();
+        client.set(new_client);
 
         return new_client.getClientUser().then(user => {
             if (!user) {
@@ -18,8 +22,11 @@
                 return resolve();
             }
             new_client.user = user;
-            client.set(new_client);
+            window.peekie = new_client;
-            client.user
+            client.update(client => {
+                client.user = user;
+                return client;
+            });
             return resolve();
         });
     });
@@ -28,7 +35,7 @@
 <div id="app">
 
     <header>
-        <Navigation />
+        <Navigation path={path} />
     </header>
 
     <main>

src/routes/+page.js

@@ -1,2 +1,6 @@
 export const prerender = true;
 export const ssr = false;
+
+export async function load({ url }) {
+    return { path: url.pathname };
+}