I am new to svelte so I cannot figure this out how to solve this after many tries. Imagine I have a component Navbar.svelte in the $lib/component. As usual I will add this component to my +layout.svelte file. What I am trying to do is make this Navbar dynamic so that the content of the Navbar changes according to my page.
The idea comes from Dynamic Island (Apple iPhone) and I want a navbar that is always stays on top and responsive like that.
(This is one of the reasons why I put my <Navbar/> in +layout.svelte because I will be using page transitions and I don't want the navbar to be a part of the page transition, it will stay on top always visible) Here is an example taken from my project.
File: Navbar.svelte
<nav> <slot> <a href="/another-page"> Another Page </a> <h1> This is navbar for home </h1> </slot> </nav File: +layout.svelte
<script> // imports </script> <Navbar/> <slot/> <Footer/> File: +page.svelte
<h1> This is a Home page </h1> How can I change the navbar when I click on the /another-page link so that in /another-page my navbar will contain only these:
<a href="/"> Home </a> <h1> This is navbar for Another Page </h1> I tried named slots but it seems like +layout.svelte only accepts one slot.