Rationalise navigation

src/components/footer.svelte

@@ -1,49 +0,0 @@
-<script>
-    export let page = "";
-    let activeHome = ''
-    if (page === '/') {let activeHome = 'active'}
-</script>
-
-<footer>
-        <a href="/" class="{activeHome}">
-          <picture>
-            <source srcset="/images/nav/home_icon.svg" type="svg+xml">
-            <img src="/images/nav/home_icon-25.png" alt="Home">
-          </picture><br>HOME
-        </a>
-        <a href="/pis">
-          PIS
-        </a>
-        <a href="/more">
-          MORE
-        </a>
-</footer>
-
-<style>
-    footer {
-        position: fixed;
-        display: flex;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 50px;
-        background-color: transparent;
-    }
-
-   footer a {
-        flex: 12;
-        width: 30%;
-        height: 100%;
-        background-color: var(--overlay-color);
-        border-color: var(--main-bg-color);
-        border-style: solid;
-        border-top: none;
-        border-bottom: none;
-        border-top-right-radius: 10px;
-        border-top-left-radius: 10px;
-    }
-
-    footer a.active {
-        background-color: aqua;
-    }
-</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>

src/routes/+page.svelte

@@ -1,15 +1,14 @@
 <script>
-import Menu from '../components/header.svelte'
+import Header from '$lib/header.svelte'
-import Footer from '../components/footer.svelte'
+import Nav from '$lib/nav.svelte'
-const title = "Svelte"
+const title = "Home"
-const page = "/"
 </script>
 <svelte:head>
     <title>OwlBoard - {title}</title>
 </svelte:head>
 
 
-<Menu {title} />
+<Header {title} />
 <div class="form-box">
     <form action="/ldb">
         <span class="input-title">Live Departure Boards</span>
@@ -21,7 +20,7 @@ const page = "/"
 </div>
 <div class="form-box">
     <form action="/result-timetable">
-        <span class="input-title">Find Train</span>
+        <span class="input-title">Train Details & PIS</span>
         <br>
         <input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
         <br>
@@ -33,7 +32,7 @@ const page = "/"
     <div class="quick-links">
     </div>
 </div>
-<Footer {page} />
+<Nav />
 
 <style>
     .input-title {

src/routes/ldb/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-   import Menu from '../../components/header.svelte'
+   import Header from '$lib/header.svelte'
-   import Footer from '../../components/footer.svelte'
+   import Nav from '$lib/nav.svelte'
    
    import {onMount} from 'svelte'
 
@@ -26,7 +26,7 @@
 
 </script>
 
-<Menu {title} />
+<Header {title} />
 
 <p>Station: <span id="station"></span></p>
 {#each jsonData as item}
@@ -34,4 +34,4 @@
 {/each}
 
 
-<Footer {page} />
+<Nav {page} />

src/routes/more/+page.svelte

@@ -1,13 +1,52 @@
 <script>
-    import Menu from '../../components/header.svelte'
+    import Header from '$lib/header.svelte'
-    import Footer from '../../components/footer.svelte'
+    import Nav from '$lib/nav.svelte'
-    
     const title = "More"   
-    const page = "more"
+    
+    const links = [
+        {title: "Your Data", path: "/more/profile"},
+        {title: "Location Reference Codes", path: "/more/reference-data"},
+        {title: "Privacy Policy", path: "/more/privacy"},
+        {title: "App Versions", path: "/more/versions"},
+        {title: "Statictics", path: "/more/stats"}
+    ]
  </script>
  
- <Menu {title} />
+ <Header {title} />
  
- <p></p>
+{#each links as item}
+<a href={item.path}>
+  <div>
+    <p>{item.title}</p>
+  </div>
+</a>
+{/each}
  
- <Footer {page} />
+ <Nav />
+
+ <style>
+    div {
+        width: 100%;
+        background: rgba(0, 0, 0, 0.226);
+        border-color: aliceblue;
+        border-width: 1px;
+        border-style: solid;
+        border-left: none;
+        border-right: none;
+        height: 50px;
+    }
+    a {
+        text-decoration: none;
+        height: 100%;
+        vertical-align: middle;
+    }
+    p {
+        color: white;
+        margin: 0;
+        padding-left: 10px;
+        text-align: left;
+        vertical-align: middle;
+        font-weight: 600;
+        font-size: 20px;
+    }
+ </style>

src/routes/pis/+page.svelte

@@ -1,13 +1,12 @@
 <script>
-    import Menu from '../../components/header.svelte'
+    import Header from '$lib/header.svelte'
-    import Footer from '../../components/footer.svelte'
+    import Nav from '$lib/nav.svelte'
     
     const title = "PIS"
-    const page = "more"
  </script>
  
- <Menu {title} />
+ <Header {title} />
  
  <p></p>
  
- <Footer {page} />
+ <Nav />

src/routes/result-timetable/+page.svelte

@@ -1,11 +1,10 @@
 <script>
-    import Menu from '../../components/header.svelte'
+    import Header from '$lib/header.svelte'
-    import Footer from '../../components/footer.svelte'
+    import Nav from '$lib/nav.svelte'
     
     import { onMount } from 'svelte'
 
     const title = "Timetable Results"
-    const page = "more"
 
     async function getHeadcode() {
         return new URLSearchParams(window.location.search).get('headcode');
@@ -24,10 +23,10 @@
     <title>OwlBoard {title}</title>
  </svelte:head>
 
- <Menu {title} />
+ <Header {title} />
  
  <p>Headcode: <span id="headcode"></span></p>
 
  <p id="data_raw"></p>
  
- <Footer {page} />
+ <Nav />