Reimplement active links

Navigation.svelte

 <script>
   import { signedIn } from './state.js'
   import sections from './sections.js'
+  import { link } from 'svelte-spa-router'
+  import active from 'svelte-spa-router/active'
 
   function shouldDisplay(section, isSignedIn) {
     // Display either the Sign In or Private section based on sign in status.
@@ -18,6 +20,11 @@
   li { display: inline-block; }
   li:not(:first-child):before { content: '|'; padding-right: 0.5em;}
   li:not(:last-child) { padding-right: 0.5em; }
+
+  :global(a.active) {
+    color: black;
+    text-decoration: none;
+  }
 </style>
 
 <nav>
@@ -26,7 +33,7 @@
       <!-- Including $signedIn here to trigger reactivity. -->
       {#if !section.notInNavigation && shouldDisplay(section, $signedIn)}
         <li>
-          <a href='/#{section.path}'>{section.title}</a>
+          <a href='{section.path}' use:link use:active>{section.title}</a>
         </li>
       {/if}
     {/each}