Open Nordalf opened 7 months ago
Where did you set the f-client-nav
attribute? To make a link trigger a partial navigation it either itself or one of the parent nodes should have this attribute. Based on your description it sounds like you placed it on a parent of the partial component, but not on a parent of the navigation on the left side.
Where did you set the
f-client-nav
attribute? To make a link trigger a partial navigation it either itself or one of the parent nodes should have this attribute. Based on your description it sounds like you placed it on a parent of the partial component, but not on a parent of the navigation on the left side.
I have added the f-client-nav
in the body
-tag. Based on the documentation:
By adding the f-client-nav attribute, we enable partials for every element beneath the
-tag.
I assumed this would be enough?
Ok, based on the information shared, we know so far is that there is a f-client-nav
attribute on the body
-tag and that there is a <Partial>
component around the main content area. Then there is some sort of TSX Tabler Icon
(assuming this is an icon component or something like that) and a <span />
tag inside the link. I'm assuming that this is similar to the snippet you shared:
<a class="..." href="/">
<IconHome class="w-12" />
<span class="md:text-xs">Home</span>
</a>
In the video we see that the images etc of the main content are reloaded, which like you said indicates that something is not working. Those are all the information I could collect so far. I'm not sure if this is enough to pinpoint the problem. I tried re-creating a similar site, but I'm unable to reproduce the problem.
Is something logged to the console by chance?
It seems if you click on an svg (e.g from a tabler icon) within an anchor, the href is followed but the f-partial nav feature is not triggered.
If you click outside the svg but still within the anchor (e.g in the border area or text), it works as expected 🤷🏻♂️
You can set the following css to prevent this undesirable behaviour:
svg { pointer-events: none; }
or in tailwind
pointer-events-none
Hello,
First: Thanks for developing Fresh. I enjoy working with the framework.
I am teaching myself Deno & Fresh, and as nearly every web application today, I have built a sidebar with navigation anchors. As many SPA's, I only want to change the 'middle'-content without reloading the sidebar. I have wrapped my content into a
<Partial... />
and provided the parent node with thef-client-nav
. But whatever I do, every file is downloaded.Each anchor point in my sidebar consists of an
TSX Tabler Icon
and a<span />
. By an accident, I realised this morning, that only when I click the span and avoid clicking the Icon, everything works as expected.Does the icons trigger some sort of events I am unaware of?
I have attached a small video illustrating the issue.
https://github.com/denoland/fresh/assets/8970495/1f4dc68a-e64a-465b-89a4-a9997dc2a2ad
The below code is the anchor point - I am clicking on the video - showing the use of
<IconHome...
.Thanks in advance.