Svelte store for updating active state on nav items

[jamestagal]

Hi all,
I just wanted to share a solution I figured out last night to an issue I had with active navigation items.

Problem: Nav items were being assigned an active state in the header (nav bar) but not being updated when clicking buttons (to nav items) on the site.

Solution: Svelte store

Process:
Create a Svelte store with the value of the home nav item.
currentNavItem.js

import { writable } from 'svelte/store';

export const currentNavItem = writable('home');

Then imported the store and subscribe to it passing the activeItem.

Header.svelte

  import { onMount } from 'svelte';
  import { currentNavItem } from '../scripts/currentNavItem.js';
  let activeItem = '';
  onMount(() => {
  currentNavItem.subscribe(value => {
    activeItem = value;
  });
});

On a nav item:

            <a
              href="."
              class="cs-li-link {activeItem === 'home' ? 'cs-active' : ''}"
            >

In a component where there is a button to one of the nav items, import the store;

  import { currentNavItem } from '../scripts/currentNavItem.js';

Then add a on click event to the button which updates the store to the current nav item.

    <a href={button.url} class="cs-button-solid" on:click={() => currentNavItem.set('contact')}>{button.title}</a>

This solution seems simple enough and worked for me but I wonder whether it is the best way to do it.
If anyone has another implementation please share.

Regards,
Ben

[jamestagal]

I forgot to add the part I needed to complete the event loop.

I needed to add the currentNavItem argument into the nav items so when clicking on any nav item it would updated the store as well.
I already had a Toggle function for opening and closing the mobile nav so I added it there as follows using the set method:

 function setActiveAndToggle(item) {
    currentNavItem.set(item);
    activeItem = item;
    isMenuOpen = false;
  }

Here is a link to the Svelte Store docs

[jimafisk]

Hey @jamestagal,

That's a great solution, thanks for sharing!

If anyone has another implementation please share.

I was actually doing something similar for a client site recently. I initially tried something similar but had issues with edge case:

1. If someone used footer links or in-page links to navigate instead of nav links, the on:click wouldn't fire to change the store
2. I was using window.location.pathname for highlighting the correct link on the initial page load (if coming from google or a referral link from a different site) but had some reactivity issues

I ended up taking a slightly different approach:

1. Passed the content magic prop to my navigation:

<Nav {content} />

2. In the Nav component set this to a reactive variable:

export let content;
$: active_link = content?.path;

3. Checked each link to see if it was active based on the current content (the Plenti router sets the correct content for the page):

<a href="/about" class={active_link === "/about" ? "active" : ""}>
  About
</a>

4. Added some style for the active link:

a.active {
  color: red;
}

[jamestagal]

Hi Jim,
That's an interesting approach. Thanks for sharing. I am trying to add this method to my existing code so that the footer links become active when clicked or the corresponding nav items are active.

Though I have an issue.
This code works for 'active_link' variable (or whatever its called) the way you outlined which is great. 😸 but I am missing styles.

class={active_link === '.' ? "active" : ''}

In my case, I have a parent class called cs-link which has styles associated with it. So the following modification gets the cs-link class added but doesn't become active & get your 'active_link'.

class="cs-link {active_link === '.' ? 'active' : ''}"

Do you know how I can get it working & apply my styles?

[jimafisk]

@jamestagal in your previous example it looked like your CSS class was cs-active, so I think you'd want to use that instead of active:

class="cs-link {active_link === '.' ? 'cs-active' : ''}"

[jamestagal]

Yes it has that class on the navigation but not in the footer so I was just adding a scoped style in the footer component.
But doesn't seem to work though the hover class works.

I have now added the active colour to the main CSS file. see below. I have just pushed those changes. Maybe I am not targeting the correct class?

 #footer-1392 .cs-link.cs-active {
    /* 14px - 16px */
    /* font-size: clamp(0.875rem, 1.5vw, 1rem);*/
  /*   line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: #bababa;
    display: block;
    transition: color 0.3s; */
    color: var(--primary);
  }
  #footer-1392 .cs-link:hover {
    color: var(--primary);
  }