Active navigation tab bug

[EthanThatOneKid]

What happened?

The active page’s navigation tab does not stay active since the SvelteKit migration.

Original: #148

[EthanThatOneKid]

Why I think this bug happened

So the reason that this bug has arisen is in Sapper, you can use a variable called segment to get the name of the current page's path. In SvelteKit, this variable has been removed (which is why our feature suddenly stopped working; segment was just always undefined).

What we can do about it

SvelteKit actually provides a module, $app/stores (https://kit.svelte.dev/docs#modules-$app-stores), which provides the data we need to determine if the page is currently active.

In navbar.svelte you can import the page store from $app/stores like so...

import { page } from '$app/stores';

Now that we are thinking of the menu items as paths (instead of slugs), we could then refactor the menuItems variable:

const menuItems = [
  { title: 'about', path: '/about' },
  { title: 'events', path: '/events' },
  { title: 'paths', path: '/paths' },
  {
    title: '<span class="headers">node</span>Buds',
    path: '/nodebuds',
  },
  { title: 'connect', path: '/connect' },
];

Finally, you can update the conditional statement that determines whether or not the aria-current HTML attribute is activated, which in turn activates the color. On line 40, update the conditional such that aria-current is true if $pages.path is equal to the path of the menuItem.

[EthanThatOneKid]

Closed by #163.