Commit 7754a57c authored by Aral Balkan's avatar Aral Balkan
Browse files

Reimplement active links

parent ea6f8ac0
<script> <script>
import { signedIn } from './state.js' import { signedIn } from './state.js'
import sections from './sections.js' import sections from './sections.js'
import { link } from 'svelte-spa-router'
import active from 'svelte-spa-router/active'
function shouldDisplay(section, isSignedIn) { function shouldDisplay(section, isSignedIn) {
// Display either the Sign In or Private section based on sign in status. // Display either the Sign In or Private section based on sign in status.
...@@ -18,6 +20,11 @@ ...@@ -18,6 +20,11 @@
li { display: inline-block; } li { display: inline-block; }
li:not(:first-child):before { content: '|'; padding-right: 0.5em;} li:not(:first-child):before { content: '|'; padding-right: 0.5em;}
li:not(:last-child) { padding-right: 0.5em; } li:not(:last-child) { padding-right: 0.5em; }
:global(a.active) {
color: black;
text-decoration: none;
}
</style> </style>
<nav> <nav>
...@@ -26,7 +33,7 @@ ...@@ -26,7 +33,7 @@
<!-- Including $signedIn here to trigger reactivity. --> <!-- Including $signedIn here to trigger reactivity. -->
{#if !section.notInNavigation && shouldDisplay(section, $signedIn)} {#if !section.notInNavigation && shouldDisplay(section, $signedIn)}
<li> <li>
<a href='/#{section.path}'>{section.title}</a> <a href='{section.path}' use:link use:active>{section.title}</a>
</li> </li>
{/if} {/if}
{/each} {/each}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment