adorthecool/pages
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Run prettier

Browse Source
This commit is contained in:
venashial
2022-06-04 00:46:23 -07:00
parent 597c071c3d
commit c9ec9f14de
49 changed files with 1515 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/package/components/NavRow.svelte
View File

@@ -1,80 +1,79 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/stores'
interface Link {
href: string;
label: string;
}
interface Link {
href: string
label: string
}
export let links: Link[];
export let query = '';
export let links: Link[]
export let query = ''
export let resetScroll = false;
export let resetScroll = false
/** Path level in URL, zero-indexed */
export let level = 0;
/** Path level in URL, zero-indexed */
export let level = 0
let path: string[];
$: path = [
...$page.url.pathname
.substring(1)
.split('/')
.map((route) => '/' + route),
'/',
];
let path: string[]
$: path = [
...$page.url.pathname
.substring(1)
.split('/')
.map((route) => '/' + route),
'/',
]
$: basePath = path.slice(0, level).join('');
$: basePath = path.slice(0, level).join('')
</script>
<nav class="navigation">
{#each links as link}
<a
href={query
? link.href
? `?${query}=${link.href}`
: '?'
: level === 0
? link.href
: basePath + link.href}
on:click={() => {
if (resetScroll) document.body.scrollTo(0, 0);
}}
class="navigation__link"
class:is-active={query
? ($page.url.searchParams.get(query) || '') === link.href
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
sveltekit:noscroll={!resetScroll}>{link.label}</a
>
{/each}
{#each links as link}
<a
href={query
? link.href
? `?${query}=${link.href}`
: '?'
: level === 0
? link.href
: basePath + link.href}
on:click={() => {
if (resetScroll) document.body.scrollTo(0, 0)
}}
class="navigation__link"
class:is-active={query
? ($page.url.searchParams.get(query) || '') === link.href
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
sveltekit:noscroll={!resetScroll}>{link.label}</a>
{/each}
</nav>
<style lang="postcss">
.navigation {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 1rem;
flex-wrap: wrap;
.navigation {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 1rem;
flex-wrap: wrap;
&__link {
font-weight: var(--font-weight-bold);
color: var(--color-text-light);
&__link {
font-weight: var(--font-weight-bold);
color: var(--color-text-light);
&.is-active {
color: var(--color-text);
position: relative;
&.is-active {
color: var(--color-text);
position: relative;
&::after {
content: '';
display: block;
position: absolute;
bottom: -0.1rem;
width: 100%;
border-radius: var(--rounded-max);
height: 0.2rem;
background-color: var(--color-brand);
}
}
}
}
&::after {
content: '';
display: block;
position: absolute;
bottom: -0.1rem;
width: 100%;
border-radius: var(--rounded-max);
height: 0.2rem;
background-color: var(--color-brand);
}
}
}
}
</style>