docs: create NavLink cookbook example

[Adbib]

The NavLink component enhances navigation by getting isPending and isActive status to styling your links

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

When building navigation in Qwik, you may want to know when a link is active or pending navigation. The standard and components don't provide this.

The NavLink component enhances navigation links by adding:

• Active Status - Apply a class when the link matches the current location.
• Pending Status - Apply a class during navigation when linking to the target location.

Use cases and why

• 1. navbar
• 2. sidebar

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	c44c065

[gioboa]

You need to add the new section here.
packages/docs/src/routes/docs/menu.md
packages/docs/src/routes/docs/cookbook/index.mdx
Can you update this files too pls?

[gioboa]

You need to add the new section here. packages/docs/src/routes/docs/menu.md packages/docs/src/routes/docs/cookbook/index.mdx Can you update this files too pls?

Can you do the change in this PR and not in a different one pls?

[gioboa]

@Adbib I fixed up the docs. I added my suggestions too.
Are we considering all the cases for isActiveprop?
what about href="/about/"
is it considered?

[Adbib]

@Adbib I fixed up the docs. I added my suggestions too. Are we considering all the cases for isActiveprop? what about href="/about/" is it considered?

yes is it

[gioboa]

I added the CodeSandbox example and it doesn't seem to work and I can't understand how verify isPending 🤔

[Adbib]

I added the CodeSandbox example and it doesn't seem to work and I can't understand how verify isPending 🤔

I think because we do a server-side and full-page refresh with a tag means that location.isNavigation will always return false.
if you try it with < Link > that does client-side navigation it should work

[gioboa]

Can you verify the missing active and pending classes pls?
If your implementation is with Link you can change it

[Adbib]

Can you verify the missing active and pending classes pls? If your implementation is with Link you can change it

its work now

[gioboa]

I can't verify it now, can you send me a screenshot pls?

[Adbib]

I can't verify it now, can you send me a screenshot pls?

this video with implementation of the same code :
https://github.com/BuilderIO/qwik/assets/17273701/61f42dec-578e-4174-8cea-00af5e2e2d06

[gioboa]

@Adbib I cleaned up the example. I removed the pending state b/c I wasn't able to make it works.
If for you it's ok I will merge it.

[Adbib]

@Adbib I cleaned up the example. I removed the pending state b/c I wasn't able to make it works. If for you it's ok I will merge it.

okay lets merge it for now untiil we find a way to pendding