Rationalise navigation

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>