bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-26 17:11:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added layout and component for navigation

Browse source
This commit is contained in:
Bart van der Braak 2023-07-20 08:57:28 +02:00
parent 01db60b009
commit a00b7d66d9
2 changed files with 61 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/Nav.svelte Normal file
View file

@ -0,0 +1,44 @@
<script lang="ts">
export let routes: { url: string; label: string }[];
</script>
<nav>
<ul>
{#each routes as route}
<li><a href={route.url}>{route.label}</a></li>
{/each}
</ul>
</nav>
<style>
nav {
background-color: #007bff;
padding: 1rem;
}
ul {
list-style: none;
display: flex;
justify-content: space-around;
margin: 0;
padding: 0;
}
li {
margin: 0;
}
a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.2s ease-in-out;
}
a:hover {
background-color: #0056b3;
}
</style>

17
src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,17 @@
<!-- __layout.svelte -->
<script>
import Nav from '../components/Nav.svelte';
export let routes = [
{ url: "/", label: "Home" },
{ url: "/projects", label: "Projects" },
{ url: "/about", label: "About" },
// { url: "/blog", label: "Blog" },
{ url: "/contact", label: "Contact" }
]
</script>
<main>
<Nav {routes} />
<slot />
</main>