From 9d0a9c607eb17f192f293b534646c5f6ffbe87f6 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 14 Jun 2023 11:02:46 +0100
Subject: [PATCH] Rationalise navigation

---
 src/components/footer.svelte             | 49 ---------------
 src/{components => lib}/header.svelte    |  0
 src/lib/nav.svelte                       | 78 ++++++++++++++++++++++++
 src/routes/+page.svelte                  | 13 ++--
 src/routes/ldb/+page.svelte              |  8 +--
 src/routes/more/+page.svelte             | 53 +++++++++++++---
 src/routes/pis/+page.svelte              |  9 ++-
 src/routes/result-timetable/+page.svelte |  9 ++-
 8 files changed, 142 insertions(+), 77 deletions(-)
 delete mode 100644 src/components/footer.svelte
 rename src/{components => lib}/header.svelte (100%)
 create mode 100644 src/lib/nav.svelte

diff --git a/src/components/footer.svelte b/src/components/footer.svelte
deleted file mode 100644
index 492d843..0000000
--- a/src/components/footer.svelte
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/components/header.svelte b/src/lib/header.svelte
similarity index 100%
rename from src/components/header.svelte
rename to src/lib/header.svelte
diff --git a/src/lib/nav.svelte b/src/lib/nav.svelte
new file mode 100644
index 0000000..a3112a2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9d54d16..322a9b1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,15 +1,14 @@
 <script>
-import Menu from '../components/header.svelte'
-import Footer from '../components/footer.svelte'
-const title = "Svelte"
-const page = "/"
+import Header from '$lib/header.svelte'
+import Nav from '$lib/nav.svelte'
+const title = "Home"
 </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 {
diff --git a/src/routes/ldb/+page.svelte b/src/routes/ldb/+page.svelte
index be47a15..0bbe38d 100644
--- a/src/routes/ldb/+page.svelte
+++ b/src/routes/ldb/+page.svelte
@@ -1,6 +1,6 @@
 <script>
-   import Menu from '../../components/header.svelte'
-   import Footer from '../../components/footer.svelte'
+   import Header from '$lib/header.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} />
\ No newline at end of file
+<Nav {page} />
\ No newline at end of file
diff --git a/src/routes/more/+page.svelte b/src/routes/more/+page.svelte
index 7c6edfa..559125a 100644
--- a/src/routes/more/+page.svelte
+++ b/src/routes/more/+page.svelte
@@ -1,13 +1,52 @@
 <script>
-    import Menu from '../../components/header.svelte'
-    import Footer from '../../components/footer.svelte'
+    import Header from '$lib/header.svelte'
+    import Nav from '$lib/nav.svelte'
+    const title = "More"   
     
-    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} />
\ No newline at end of file
+ <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>
\ No newline at end of file
diff --git a/src/routes/pis/+page.svelte b/src/routes/pis/+page.svelte
index 3e43be8..15e906c 100644
--- a/src/routes/pis/+page.svelte
+++ b/src/routes/pis/+page.svelte
@@ -1,13 +1,12 @@
 <script>
-    import Menu from '../../components/header.svelte'
-    import Footer from '../../components/footer.svelte'
+    import Header from '$lib/header.svelte'
+    import Nav from '$lib/nav.svelte'
     
     const title = "PIS"
-    const page = "more"
  </script>
  
- <Menu {title} />
+ <Header {title} />
  
  <p></p>
  
- <Footer {page} />
\ No newline at end of file
+ <Nav />
\ No newline at end of file
diff --git a/src/routes/result-timetable/+page.svelte b/src/routes/result-timetable/+page.svelte
index 36ed627..85671cf 100644
--- a/src/routes/result-timetable/+page.svelte
+++ b/src/routes/result-timetable/+page.svelte
@@ -1,11 +1,10 @@
 <script>
-    import Menu from '../../components/header.svelte'
-    import Footer from '../../components/footer.svelte'
+    import Header from '$lib/header.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} />
\ No newline at end of file
+ <Nav />
\ No newline at end of file