title: Sidebar profile link requires reload after login in sapper/svelte
body: <p>I have following sapper layout.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      import { onMount } from &quot;svelte&quot;;
      import { goto, stores } from &quot;@sapper/app&quot;;
      import { mdiLogin, mdiLogout, mdiGithub } from &quot;@mdi/js&quot;;
  
      import &quot;./_app.scss&quot;;
      import &quot;./_elevated.scss&quot;;
  
      import TopAppBar, { Row, Section, Title } from &quot;@smui/top-app-bar&quot;;
      import { Scrim, AppContent } from &quot;@smui/drawer&quot;;
      import IconButton from &quot;@smui/icon-button&quot;;
      // import List, { Item, Text } from &quot;@smui/list&quot;;
      import { Icon } from &quot;@smui/common&quot;;
      import A from &quot;@smui/common/A.svelte&quot;;
      import Drawer from &quot;../components/_Drawer.svelte&quot;;
  
      import { post } from &quot;utils.js&quot;;
  
      const { page, session } = stores();
  
      async function logout() {
          await post(`auth/logout`);
          $session.user = null;
          localStorage.removeItem(&quot;jwt&quot;);
          goto(&quot;/&quot;);
      }
  
      // const iframe = $page.path.startsWith(&quot;/demo/top-app-bar-iframe&quot;);
  
      let mainContent;
      let drawerOpen = false;
      let miniWindow = false;
      // let user = undefined;
  
      onMount(async () =&gt; {
          setMiniWindow;
          // const unsubscribe = session.subscribe(async ($session) =&gt; {
          //  if($session.user){
          //      user = $session.user;
          //      console.log(user);
          //  }
          // });
          // return unsubscribe;
      });
  
      function setMiniWindow() {
          miniWindow = window.innerWidth &lt; 720;
      }
      let sections = [
          {
              name: &quot;Create Topic&quot;,
              route: &quot;/ask&quot;,
              protected: true,
              logout_only: false,
          },
          {
              name: &quot;Browse Topics&quot;,
              route: &quot;/topics&quot;,
              protected: false,
              logout_only: false,
          },
          {
              name: &quot;Tags&quot;,
              route: &quot;/tags&quot;,
              protected: false,
              logout_only: false,
          },
          {
              name: &quot;Users&quot;,
              route: &quot;/users&quot;,
              protected: false,
              logout_only: false,
          },
          {
              name: &quot;Profile&quot;,
              route: `/profile/${$session.user}`,
              protected: true,
              logout_only: false,
          },
          {
              name: &quot;Register&quot;,
              route: &quot;/register&quot;,
              protected: false,
              logout_only: true,
          },
      ];
  
      let activeSection = sections.find(
          (section) =&gt; &quot;route&quot; in section &amp;&amp; section.route === $page.path
      );
      function pickSection(section) {
          drawerOpen = false;
          mainContent.scrollTop = 0;
  
          // sections.forEach((section) =&gt;
          //  section.component.$set({ activated: false })
          // );
          // section.component.$set({ activated: true });
  
          activeSection =
              &quot;shortcut&quot; in section
                  ? sections.find((sec) =&gt; sec.route === section.shortcut)
                  : section;
      }
  &lt;/script&gt;
  
  &lt;svelte:window on:resize={setMiniWindow} /&gt;
  
  &lt;TopAppBar variant=&quot;static&quot; class=&quot;demo-top-app-bar&quot;&gt;
      &lt;Row&gt;
          &lt;Section&gt;
              {#if miniWindow}
                  &lt;IconButton
                      class=&quot;material-icons&quot;
                      on:click={() =&gt; (drawerOpen = !drawerOpen)}
                  &gt;
                      menu
                  &lt;/IconButton&gt;
              {/if}
              &lt;Title
                  component={A}
                  href=&quot;/&quot;
                  on:click={() =&gt; (activeSection = null)}
                  class=&quot;mdc-theme--primary&quot;
                  style={miniWindow ? &quot;padding-left: 0;&quot; : &quot;&quot;}
              &gt;
                  Arth
              &lt;/Title&gt;
          &lt;/Section&gt;
          &lt;Section align=&quot;end&quot; toolbar&gt;
              {#if $session.user}
                  &lt;IconButton on:click={logout} title=&quot;Log Out&quot;&gt;
                      &lt;Icon&gt;
                          &lt;svg style=&quot;width:24px;height:24px&quot; viewBox=&quot;0 0 24 24&quot;&gt;
                              &lt;path fill=&quot;#000000&quot; d={mdiLogout} /&gt;
                          &lt;/svg&gt;
                      &lt;/Icon&gt;
                  &lt;/IconButton&gt;
              {:else}
                  &lt;IconButton href=&quot;/login&quot; title=&quot;Log In&quot;&gt;
                      &lt;Icon&gt;
                          &lt;svg style=&quot;width:24px;height:24px&quot; viewBox=&quot;0 0 24 24&quot;&gt;
                              &lt;path fill=&quot;#000000&quot; d={mdiLogin} /&gt;
                          &lt;/svg&gt;
                      &lt;/Icon&gt;
                  &lt;/IconButton&gt;
              {/if}
              &lt;IconButton
                  href=&quot;htts://github.com/Nalanda-Labs/arth&quot;
                  title=&quot;Source Code&quot;
              &gt;
                  &lt;Icon&gt;
                      &lt;svg style=&quot;width:24px;height:24px&quot; viewBox=&quot;0 0 24 24&quot;&gt;
                          &lt;path fill=&quot;#000000&quot; d={mdiGithub} /&gt;
                      &lt;/svg&gt;
                  &lt;/Icon&gt;
              &lt;/IconButton&gt;
          &lt;/Section&gt;
      &lt;/Row&gt;
  &lt;/TopAppBar&gt;
  &lt;div class=&quot;drawer-container&quot;&gt;
      &lt;Drawer {miniWindow} {sections} {drawerOpen} {pickSection} /&gt;
      {#if miniWindow}
          &lt;Scrim /&gt;
      {/if}
      &lt;AppContent class=&quot;app-content&quot;&gt;
          &lt;main
              class=&quot;main-content&quot;
              bind:this={mainContent}
              class:mdc-elevation--z4={true}
          &gt;
              &lt;slot /&gt;
          &lt;/main&gt;
      &lt;/AppContent&gt;
  &lt;/div&gt;
  </code></pre>
  <p>As you can see in sections array the profile uses <code>$session.user</code> to render profile link. After login <code>$session.user</code> is set but after login the link still point to <code>/profile/undefined</code>. Only on complete page reloadit shows the correct link. Note that this link is part of <code>Drawer</code> component which is not part of <code>main</code> component. <code>$session.user</code> is being set correctly in <code>login.js</code> and it works nicely for everything else. The only problem is page requires a reload.</p>