Show sub navigation based on path

[cbaarendse]

Love this router. It looks like it will be easy to understand what is happening even months after coding.

I'm looking to put a sub-navigation bar in my header, right under the main-navigation. The content of the sub-navigation depends on which part of the site one visits. One solution could be to base the choice for the right sub-navigation bar on an item on the router object.

So for instance in the Svelte REPL example. The sub navigation bar Sites Photos is now in the portfolio component. I would like it straight under the main nav bar Home Portfolio Contacts. Code would be something like:

<header>
<nav class="main-nav"> ...</nav>
{#if $router.url =='/portfolio/*'} 
<nav class="sub-nav"> 
<a href='portfolio/sites'>Sites</a><a href='portfolio/photos'>Photos</a>
</nav>
{/if}
</header>

Then we could add other sub-navigation:

{#if $router.url =='/contacts/*'} 
<nav class="sub-nav"> 
<a href='portfolio/address'>Adress</a><a href='portfolio/socialmedia'>Social Media</a>
</nav>
{/if}

or $router.base instead of $router.url, for instance:

<{#if $router.base =='/portfolio'} 
<nav class="sub-nav"> 
<a href='portfolio/sites'>Sites</a> <a href='portfolio/photos'>Photos</a>
</nav>
{/if}

[AlexxNB]

Hello! So what is a question? Do you want to have $router.base? This is not a solution, because somebody may want to have 2nd level navigation, for example.

You can use $router.path to have current URL and check it for your needs:

{#if $router.path.startsWith('/portfolio')}
...
{/if}

[cbaarendse]

Yes, that was the question. I will go with your solution nevertheless. That will keep it tiny. 🙂

Thank you,

Best,

Constantijn Baarendse

---

From: Alexey Schebelev @.> Sent: Friday, August 13, 2021 2:37 PM To: AlexxNB/tinro @.> Cc: Constantijn Baarendse @.>; State change @.> Subject: Re: [AlexxNB/tinro] Show sub navigation based on path (#79)

Hello! So what is a question? Do you want to have $router.base? This is not a solution, because somebody may want to have 2nd level navigation, for example.

You can use $router.path to have current URL and check it for your needs:

{#if $router.path.startsWith('/portfolio')} ... {/if}

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://github.com/AlexxNB/tinro/issues/79#issuecomment-898428729, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AB6NTMBVTLLWJNR6QNX5QWTT4UGW3ANCNFSM5B2JXL7A. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email.