<a> link in menu

[akiarostami]

First of all, wonderful work!

When I add an <a use:menu.item href="/">Home</a> link as a menu item, it goes to the href page, but instead of a hot reload, it completely refreshes the page. Am I missing something ?

Thank you.

[CaptainCodeman]

Thanks!

Did you check that it does the same without the use:menu.item added? (just in case it's a regular SvelteKit config thing, CSR disabled or something like that).

If not, I'd guess it's because event propagation is being prevented, stopping the Svelte link handling from kicking in. I'll have a look into it.

[akiarostami]

It does the same without the use:menu.item, but only if it's within the menu.items block. Outside of that block it works fine.

What I did was I wrote a small handler, and I check if there's an href, then I use preventDefault and use goto to change the page. It works fine that way, but it needs manual handling.

[CaptainCodeman]

Thanks for the extra info. I think I originally added it when the component was structured slightly differently, and clicking an item then triggered the toggle button again, so it probably isn't needed and can be removed. I'll have a play around with it so it shouldn't need any special handling.

[CaptainCodeman]

Let me know if that doesn't fix it - I tested it by converting the menu items into anchor elements and they didn't trigger a re-load:

<a
  use:menu.item
  class="group flex rounded-md items-center w-full px-2 py-2 text-sm {active ? 'bg-violet-500 text-white' : 'text-gray-900'}"
  href="/menu?{option.text}"
>
  <svelte:component this={option.icon} class="w-5 h-5 mr-2" {active} />
  {option.text}
</a>```

[akiarostami]

It still reloads to page on my end.

[CaptainCodeman]

Here's a demo showing it working (view the console to see it only loads the page once): https://stackblitz.com/edit/sveltejs-kit-template-default-wdbjyh?file=src/routes/+page.svelte

If you can fork it to reproduce, that will be helpful.

[CaptainCodeman]

Note to self: have to also check keyboard handling works for links ...