Sapperjs app user logged menu instead of the site wide menu

Question

I'm using the sapper template app and I'm able to create users and log them and redirect them to user section. My question is regarding the site wide menu that displayed on top of the site.

In the menu on top, I have home, signin/login and register. Now when the user try to login and successful, I should redirect them to user section, where the menu on top is replaced from (home, login, register) to ("logout", "Profile"), the typical site wide behavior.

I've no clue how to do that in Sapper. My understanding is I have the _layout.svelte inside the routes folder. In that component/file, I have the nav.svelte where the code is :

    <nav>
    <ul>
  
    <li><a class:selected='{segment === undefined}' href='.'>home</a></li>        
    <li><a class:selected='{segment === "register"}' href='register'>Register</a></li>
    <li><a class:selected='{segment === "signin"}' href='signin'>Signin</a></li>
   
  </ul>
  
</nav>

and in the _layout.svelte, it is simple component :

 <Nav {segment}/>

<main>
    <slot></slot>
</main>

I'll leave the style code out of this as it is irrelevant. So, how do you show specific menu items on top of the site according to user status (logged or not logged) in Sapper? Can I use if/else inside the nav.svelte or inside the _layout.svelte which responsible for displaying the menu on top for every component in the routes folder.

I appreciate any help...I hope that solutions don't involve using outside library because it defeats the purpose of using Sapperjs. Is sapper capable of displaying different menu on the top depending on a condition? How to do that?

Answer 1

You would use an if/else in your navigation component

<li><a class:selected='{segment === undefined}' href='.'>home</a></li>        
{#if userLoggedIn}
    <li><a class:selected='{segment === "profile"}' href='profile'>Profile</a></li>
    <li><a href='logout'>Logout</a></li>
{:else}
    <li><a class:selected='{segment === "register"}' href='register'>Register</a></li>
    <li><a class:selected='{segment === "signin"}' href='signin'>Signin</a></li>
{/if}

To get userLoggedIn you would probably use a store, or have it filled in from a session.