From 3a95dd35df9f706b2f9ed77213e94cd127c6c197 Mon Sep 17 00:00:00 2001
From: Nicola Zangrandi <wasp@wasp.ovh>
Date: Mon, 17 Feb 2025 16:21:26 +0100
Subject: [PATCH] feat(qn): Add responsive navigation with side/bottom bar

---
 src/lib/components/Navigation.svelte | 79 ++++++++++++++++++++++++++++
 src/routes/+page.svelte              |  3 ++
 src/routes/feeds/+page.svelte        | 14 +++++
 src/routes/notes/[id]/+page.svelte   | 16 ++++--
 src/routes/readlist/+page.svelte     | 14 +++++
 5 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/Navigation.svelte
 create mode 100644 src/routes/feeds/+page.svelte
 create mode 100644 src/routes/readlist/+page.svelte

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
new file mode 100644
index 0000000..647f220
--- /dev/null
+++ b/src/lib/components/Navigation.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    
+    const routes = [
+        { path: '/', label: 'Notes', icon: '📝' },
+        { path: '/feeds', label: 'Feeds', icon: '📰' },
+        { path: '/readlist', label: 'Read Later', icon: '📚' }
+    ];
+    
+    $: currentPath = $page.url.pathname;
+    $: isMobile = false;
+    
+    function checkMobile() {
+        isMobile = window.innerWidth < 768;
+    }
+
+    onMount(() => {
+        checkMobile();
+    });
+</script>
+
+<svelte:window on:resize={checkMobile}/>
+
+{#if isMobile}
+    <nav class="navbar is-fixed-bottom p-0">
+        <div class="navbar-brand is-justify-content-space-around is-flex-grow-1">
+            {#each routes as route}
+                <a 
+                    href={route.path} 
+                    class="navbar-item has-text-centered"
+                    class:is-active={currentPath === route.path}
+                >
+                    <div>
+                        <span class="icon">{route.icon}</span>
+                        <p class="is-size-7">{route.label}</p>
+                    </div>
+                </a>
+            {/each}
+        </div>
+    </nav>
+{:else}
+    <nav class="menu p-4 is-fixed-left">
+        {#each routes as route}
+            <a 
+                href={route.path} 
+                class="button is-fullwidth mb-2 is-justify-content-start"
+                class:is-light={currentPath === route.path}
+            >
+                <span class="icon">{route.icon}</span>
+                <span>{route.label}</span>
+            </a>
+        {/each}
+    </nav>
+{/if}
+
+<style>
+    .is-fixed-left {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 200px;
+        background: inherit;
+        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+    }
+
+    @media (max-width: 768px) {
+        :global(body) {
+            padding-bottom: 60px;
+        }
+    }
+    
+    @media (min-width: 769px) {
+        :global(body) {
+            padding-left: 200px;
+        }
+    }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b3193c5..3030ef8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
     import { notes } from '$lib';
     import { stripMarkdown } from '$lib/markdown';
     import { onMount } from 'svelte';
+    import Navigation from '$lib/components/Navigation.svelte';
     
     onMount(() => {
         notes.load();
@@ -9,6 +10,8 @@
     });
 </script>
 
+<Navigation />
+
 <div class="container">
     <section class="section">
         <h1 class="title">My Notes</h1>
diff --git a/src/routes/feeds/+page.svelte b/src/routes/feeds/+page.svelte
new file mode 100644
index 0000000..89a05c3
--- /dev/null
+++ b/src/routes/feeds/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+</script>
+
+<Navigation />
+
+<div class="container">
+    <section class="section">
+        <h1 class="title">Feed Reader</h1>
+        <div class="notification is-info">
+            Feed Reader functionality coming soon!
+        </div>
+    </section>
+</div>
diff --git a/src/routes/notes/[id]/+page.svelte b/src/routes/notes/[id]/+page.svelte
index 8728761..1ae7032 100644
--- a/src/routes/notes/[id]/+page.svelte
+++ b/src/routes/notes/[id]/+page.svelte
@@ -59,7 +59,17 @@
     }
 </script>
 
-<div class="container" on:click={handleLinkClick}>
+<div 
+    class="container" 
+    on:click={handleLinkClick}
+    on:keydown={event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            handleLinkClick(event);
+        }
+    }}
+    role="button"
+    tabindex="0"
+>
     <section class="section">
         {#if note}
             {#if isEditing}
@@ -89,8 +99,8 @@
                             ></textarea>
                         </div>
                         <div class="mt-4 box">
-                            <label class="label">Preview</label>
-                            <div class="content">
+                            <label class="label" for="preview">Preview</label>
+                            <div id="preview" class="content" aria-live="polite">
                                 {@html renderMarkdown(editedContent)}
                             </div>
                         </div>
diff --git a/src/routes/readlist/+page.svelte b/src/routes/readlist/+page.svelte
new file mode 100644
index 0000000..b34d214
--- /dev/null
+++ b/src/routes/readlist/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+</script>
+
+<Navigation />
+
+<div class="container">
+    <section class="section">
+        <h1 class="title">Read Later</h1>
+        <div class="notification is-info">
+            Read Later functionality coming soon!
+        </div>
+    </section>
+</div>