Rationalise navigation

src/lib/header.svelte

@@ -0,0 +1,48 @@
+<script>
+    export let title = 'title'
+</script>
+
+<div class="headerBar">
+    <a href="/">
+        <picture>
+          <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
+          <img src="/images/logo/wide_logo_200.png" alt="OwlBoard Logo">
+        </picture>
+    </a>
+    <header>{title}</header>
+</div>
+<div class="headerBlock">
+ <!-- This exists to prevent the headerBar overlapping anything below it -->
+</div>
+<style>
+.headerBar {
+    background: var(--overlay-color);
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    height: 50px;
+}
+
+img {
+    position: absolute;
+    height: 40px;
+    left: 8px;
+    top: 5px;
+}
+
+header {
+    font-family: urwgothic, sans-serif;
+    font-weight: 600;
+    margin-top: 6px;
+    margin-left: 20px;
+    font-size: 20pt;
+}
+
+.headerBlock {
+    height: 50px;
+    margin: 0;
+    padding: 0;
+}
+</style>

src/lib/nav.svelte

@@ -0,0 +1,78 @@
+<script>
+    const links = [
+      {
+        title: "Home",
+        path: "/",
+        svgPath: "/images/nav/home_icon.svg",
+        pngPath: "/images/nav/home_icon-25.png"
+      },
+      {
+        title: "PIS",
+        path: "/pis",
+        svgPath: "",
+        pngPath: ""
+      },
+      {
+        title: "More",
+        path: "/more",
+        svgPath: "/images/nav/hamburger.svg",
+        pngPath: "/images/nav/hamburger.svg"
+      }
+    ]
+    import { page } from "$app/stores";
+</script>
+
+<footer>
+  {#each links as item}
+        <a href={item.path} class:active={$page.url.pathname == item.path}>
+          <picture>
+            <source srcset={item.svgPath} type="svg+xml">
+            <img src="{item.pngPath}" alt="">
+          </picture><br><span>{item.title}</span>
+        </a>
+  {/each}
+</footer>
+
+<style>
+    footer {
+        position: fixed;
+        display: flex;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        background-color: rgba(0, 0, 0, 0.123);
+    }
+
+   footer a {
+        flex: 12;
+        width: 30%;
+        height: 100%;
+        background-color: var(--overlay-color);
+        border-style: solid;
+        border-width: 1px;
+        border-top: none;
+        border-bottom: none;
+        border-color: rgba(0, 0, 0, 0.24);
+        text-decoration: double;
+        font-weight: 600;
+    }
+
+    footer a.active {
+        background-color: transparent;
+    }
+
+    img {
+      height: 20px;
+      width: 20px;
+      margin: 0;
+      margin-top: 3px;
+      padding: 0;
+    }
+
+    span {
+      margin: 0;
+      margin-bottom: 3px;
+      padding: 0;
+    }
+</style>