oscarzwagers.nl / keeptrack
A website inspired by Last.fm that will keep track of your listening statistics
lastfm music statistics
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Update navigation components to use the right component name and to use newly generated route functions.

oscar345 13132395 87ed2dc0

+23 -8
+16 -6
web/components/navigation/library/Navigation.svelte
··· 3 3 import { Link, page } from "@inertiajs/svelte"; 4 4 5 5 let items: NavigationItemProps[] = $state([ 6 - { label: "Overview", href: "/library", view: "overview" }, 7 - { label: "Artists", href: "/library/artists", view: "artists" }, 8 - { label: "Releases ", href: "/library/releases", view: "releases" }, 9 - { label: "Songs", href: "/library/songs", view: "songs" }, 6 + { label: "Overview", href: "/library", view: "library/Index" }, 7 + { 8 + label: "Artists", 9 + href: "/library/artists", 10 + view: "library/artists/Index", 11 + }, 12 + { 13 + label: "Releases ", 14 + href: "/library/releases", 15 + view: "library/releases/Index", 16 + }, 17 + { label: "Songs", href: "/library/songs", view: "library/songs/Index" }, 10 18 ]); 11 19 </script> 12 20 ··· 34 42 display: flex; 35 43 flex-direction: column; 36 44 gap: var(--spacing-2); 45 + position: sticky; 46 + top: calc(var(--spacing-16) + var(--spacing-6)); 37 47 } 38 48 39 49 ul { ··· 64 74 } 65 75 66 76 li > :global(a[aria-current="page"]) { 67 - background-color: var(--color-base-200); 77 + background-color: var(--color-muted-100); 68 78 } 69 79 70 80 li > :global(a:hover) { 71 - background-color: var(--color-muted-100); 81 + background-color: var(--color-muted-200); 72 82 } 73 83 </style>
+7 -2
web/components/navigation/web/Navigation.svelte
··· 1 1 <script lang="ts"> 2 2 import Logo from "$components/brand/Logo.svelte"; 3 - import { GET_Index, GET_Library } from "$routes"; 3 + import { GET_Friends, GET_Index, GET_Library, GET_Mixtapes } from "$routes"; 4 4 import type { NavigationItemProps } from "$lib/types"; 5 5 import { Link, page } from "@inertiajs/svelte"; 6 6 7 7 let items: NavigationItemProps[] = $state([ 8 8 { href: GET_Index(), label: "Home", view: "Index" }, 9 + { href: GET_Mixtapes(), label: "Mixtapes", view: "mixtapes/Index" }, 10 + { href: GET_Friends(), label: "Friends", view: "friends/Index" }, 9 11 { href: GET_Library(), label: "Library", view: "library/Index" }, 10 12 ]); 11 13 </script> 12 14 13 15 <header> 14 16 <nav class="container"> 15 - <Link> 17 + <Link href={GET_Index()}> 16 18 <Logo /> 17 19 </Link> 18 20 <ul> ··· 36 38 header { 37 39 background-color: var(--color-base-300); 38 40 border-bottom: var(--theme-default-border); 41 + position: sticky; 42 + top: 0; 43 + z-index: 99; 39 44 } 40 45 41 46 nav {