Rationalise navigation

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 {

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} />
+<Nav {page} />

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} />
+ <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 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} />
+ <Nav />

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} />
+ <Nav />