highlighted the current page item on navebar #303
Conversation
implemented svelvekit functionalities directly Co-authored-by: Rita Lopes <93883163+MRita443@users.noreply.github.com>
| import { page } from '$app/stores'; | ||
|
|
||
| $: currentPage = $page.url.pathname; | ||
| const links = [ |
There was a problem hiding this comment.
For the pages that are not ready, this is linking for a 404 page. Shouldn't it be better to redirect to "#", as it was before?
| </div> | ||
| </nav> | ||
|
|
||
| <style> |
There was a problem hiding this comment.
Since we are using Tailwind to define the style of html components, you should avoid using pure CSS.
| <a href="/#/">Eventos</a> | ||
| <a href="/contacts">Contactos</a> | ||
| {#each links as { href, label, pageComp }} | ||
| <a class:active={currentPage === pageComp} {href}> |
There was a problem hiding this comment.
Here you could use a svelte conditional or a ternary to render the different items on the navbar.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator
https://svelte.dev/tutorial/svelte/if-blocks
|
Another thing, now that the navbar has state, it should be nice to have some storybook tests. There are some examples already in the codebase but you can also use the documentation as reference. |
Closes #300
Now, if your current page is one of the pages from navebar, the corresponding item from the navebar will be highlighted.
Review checklist