33 lines
1.0 KiB
Svelte
33 lines
1.0 KiB
Svelte
<script context="module" lang="ts">
|
|
export type Page = {
|
|
name: string,
|
|
target: string,
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export let pages: Array<Page>;
|
|
|
|
$: activeTarget = 0;
|
|
</script>
|
|
|
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<nav class="bg-gray-800">
|
|
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
|
<div class="relative flex h-16 items-center justify-between">
|
|
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
|
<div class="hidden sm:ml-6 sm:block">
|
|
<div class="flex space-x-4">
|
|
{#each pages as page, i}
|
|
<a href={page.target} on:click={() => activeTarget = i} class="{i === activeTarget ? 'bg-gray-900 text-slate-400 px-3 py-2 rounded-md text-sm font-medium' : 'text-slate-400 hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium'}" aria-current="page">{page.name}</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<slot />
|
|
</div>
|
|
</nav>
|
|
|