Oppgave 1 — Routes, Layout og Lenker

Bakgrunn

I SvelteKit er URL-strukturen direkte knyttet til mappestrukturen inne i src/routes/. Hver mappe = en rute. Filen +page.svelte er innholdet på den siden.

src/routes/
├── +layout.svelte       ← vises på alle sider
├── +page.svelte         → /
├── om/
│   └── +page.svelte     → /om
└── kontakt/
    └── +page.svelte     → /kontakt

+layout.svelte er felles ramme for alle undersider. Du bruker {@render children()} som plassholder for sidens eget innhold.

Oppgaven

1. Opprett src/routes/om/+page.svelte med litt tekst om deg selv.
2. Opprett src/routes/kontakt/+page.svelte med kontaktinformasjon.
3. Rediger src/routes/+layout.svelte og legg til en nav med lenker til alle tre sidene. Gjerne design en litt fin topbar

Eksempel — +layout.svelte

<script>
  let { children } = $props();
</script>

<nav>
  <a href="/">Hjem</a>
  <a href="/om">Om meg</a>
  <a href="/kontakt">Kontakt</a>
</nav>

{@render children()}

<style>
  nav { display: flex; gap: 1rem; padding: 1rem; }
  a { text-decoration: none; color: #333; }
</style>

Og src/routes/om/+page.svelte — sider kan også ha en <script>-blokk med variabler du kan vise i markup-en:

<script>
  let navn = $state('Sondre');
</script>

<h1>Om meg</h1>
<p>Hei! Jeg heter {navn} og lærer SvelteKit.</p>

<label>
  Endre navn:
  <input bind:value={navn} />
</label>

Krøllparenteser ({navn}) setter inn verdien av variabelen i HTML-en. $state(...) gjør variabelen reaktiv, og bind:value kobler input-feltet til variabelen begge veier — skriv i feltet, så oppdaterer overskriften seg automatisk.

Tips

• Mappenavnet er alltid URL-en: src/routes/om/ → /om.
• Du kan neste mapper: routes/blogg/post/ → /blogg/post.
• Layout-filer er hierarkiske — en +layout.svelte i routes/om/ gjelder bare /om og undersidene der.
• SvelteKit oppdaterer siden uten full reload når du klikker på lenker.