title: How do I make a component that is aware of the current url in Sapper with Svelte?
body: <p>I have a page that has a nav bar with a "Quarters" link. Under the Quarters link, when the user is on the <code>/quarters</code> route, a list of quarters will be shown, like 2019Q2 etc. The url will be <code>/quarters/2019q2</code>. </p>
  
  <p>I want to make a component that show shows a hyperlink that will have the <code>selected</code> class if the current url matches the href of the link. Here's the closest I can get: </p>
  
  <pre><code>&lt;script&gt;
    import { afterUpdate } from 'svelte';
    export let segment;
    export let text = 'text here';
    export let link;
    let isCurrentPath = false;
    console.log(segment, link, text);
    afterUpdate(() =&gt; {
      if (window.location.pathname.includes(link)) {
        isCurrentPath = true;
        debugger;
      }
      console.log('HL afterUpdate ', window.location);
    });
  &lt;/script&gt;
  
  &lt;style&gt;
    /* omitted */
  &lt;/style&gt;
  
  &lt;a class:selected={segment &amp;&amp; isCurrentPath} href={link}&gt;{text}&lt;/a&gt;
  </code></pre>
  
  <p>That works fine for the first load, but when the user navigates to a different data page the selection is not updated. How do I get some code to only run on the client-side? If I access the <code>window</code> object outside of <code>afterUpdate</code> I will get an null ref error from the server-side code.</p>
  
  <p>ETA: Tried this too: </p>
  
  <pre><code>  let isCurrentPath = false;
    let path = typeof window === 'undefined' ? '' : window.location.pathname;
    $: if (path) isCurrentPath = window.location.pathname.includes(link);
  </code></pre>
  
  <p>That code doesn't fire when the user clicks one of the data links. Tried <code>onMount</code> as well with no positive result. </p>