my-portfolio/src/routes/+layout.svelte

62 lines
2.3 KiB
Svelte
Raw Normal View History

<script>
2024-04-06 14:09:36 +00:00
import { blur, fade } from "svelte/transition";
2024-04-05 18:42:45 +00:00
import "../app.css";
2024-04-23 14:56:43 +00:00
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
import '../app.css';
// Navigation links are generated based on this object
2024-04-04 21:38:25 +00:00
const nav = [
{
name: "index",
subPages: [],
},
{
name: "whoami",
subPages: ["about", "resume", "homelab"],
},
{
name: "portfolio",
2024-04-23 14:56:43 +00:00
subPages: ["learnings", "portfolio_project"],
2024-04-13 19:15:03 +00:00
},
{
name: "contact",
2024-04-13 21:34:10 +00:00
subPages: ["get_in_touch", "socials"],
2024-04-04 21:38:25 +00:00
},
];
let selected = nav[0]; // keep track of the selected 'page' object.
2024-04-04 21:38:25 +00:00
let intSelected = 0; // selected page index
// change the selected component (the event.originalTarget.id is not accessible in Chrome so switched to event.srcElement.id)
function changeComponent(event) {
selected = nav[event.srcElement.id];
intSelected = event.srcElement.id;
}
</script>
<nav class="nav-container h-32 w-full">
<ul class="text-center">
{#each nav as main,i}
{#if i != 0}
{#if !nav[i].subPages[0]}
<li class="nav-item font-jose inline-block"><a href={main.name} class={selected==nav[i] ? "nav-link stroke-slate-700 text-2xl p-3" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</a></li>
{:else}
<li class="nav-item font-jose inline-block"><button class={selected==nav[i] ? "nav-link stroke-slate-700 text-2xl p-3" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</button></li>
2024-04-05 19:21:04 +00:00
{/if}
{/if}
{/each}
</ul>
<hr class="nav-divider max-w-xl h-0.5 border-0 mx-auto my-1 bg-black rounded md:my-1"/>
{#key selected}
2024-04-06 14:09:36 +00:00
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
2024-04-05 19:21:04 +00:00
{#each selected.subPages as subPage}
2024-04-13 21:56:33 +00:00
<li class="sub-nav-item inline-block font-jose"><a class="sub-nav-link text-xl p-2"href={(subPage)}>{subPage.replace(/_/g, ' ')}</a></li>
2024-04-05 19:21:04 +00:00
{/each}
</ul>
{/key}
2024-04-23 14:56:43 +00:00
<ThemeSwitch class="absolute "/>
</nav>
2024-04-22 05:08:05 +00:00
<div class="container text-center md:max-w-md mx-auto sm:max-w-sm ">
2024-04-06 14:09:36 +00:00
<slot />
</div>