feat(qn): Add responsive navigation with side/bottom bar

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>

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>

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>

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>
+                            <label class="label" for="preview">Preview</label>
-                            <div class="content">
+                            <div id="preview" class="content" aria-live="polite">
                                 {@html renderMarkdown(editedContent)}
                             </div>
                         </div>

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>