mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-08-04 20:55:19 +02:00
Add Navbar component and camping logo to page
This commit is contained in:
parent
90036c5c14
commit
c806cf074d
4 changed files with 35 additions and 0 deletions
1
src/lib/assets/camping.svg
Normal file
1
src/lib/assets/camping.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 16 KiB |
29
src/lib/components/Navbar.svelte
Normal file
29
src/lib/components/Navbar.svelte
Normal file
|
@ -0,0 +1,29 @@
|
|||
<style>
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
function navHome() {
|
||||
window.location.href = '/';
|
||||
|
||||
}
|
||||
function navLog() {
|
||||
window.location.href = '/log';
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="navbar">
|
||||
|
||||
<p>AdventureLog 🗺️</p>
|
||||
<button on:click={navHome}>Home</button>
|
||||
<button on:click={navLog}>Log</button>
|
||||
<hr>
|
||||
<br>
|
||||
</div>
|
|
@ -1,7 +1,9 @@
|
|||
<script>
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
</script>
|
||||
|
||||
<Navbar />
|
||||
<section>
|
||||
<slot></slot>
|
||||
</section>
|
||||
|
@ -9,6 +11,7 @@
|
|||
|
||||
<style>
|
||||
section {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 5rem;
|
||||
/* gives the footer space! */
|
||||
}
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
<script lang="ts">
|
||||
import campingDrawing from "$lib/assets/camping.svg";
|
||||
function navToLog() {
|
||||
window.location.href = '/log';
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Welcome to AdventureLog 🗺️</h1>
|
||||
<img src={campingDrawing} width="25%" alt="Logo" />
|
||||
<button on:click={navToLog}>Open Log</button>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue