Files
xyflow/packages/svelte/src/example-components/Header/Header.svelte
T

39 lines
687 B
Svelte

<script lang="ts">
import { goto } from '$app/navigation';
const routes = [
'overview',
'stress',
'usesvelteflow',
'validation'
];
const onChange = (event: Event) => {
const route = (event.target as HTMLSelectElement).value;
goto(`/${route}`);
};
</script>
<header>
<div class="logo">SvelteFlow</div>
<select on:change={onChange}>
{#each routes as route}
<option value={route}>{route}</option>
{/each}
</select>
</header>
<style>
header {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
font-weight: 700;
align-items: center;
color: #111;
}
.logo {
margin-right: 1rem;
}
</style>