owlboard-svelte/src/routes/more/+page.svelte

<script>
    import Header from '$lib/navigation/header.svelte'
    import Nav from '$lib/navigation/nav.svelte'
    const title = "More"   
    
    const links = [
        {title: "Your Data", path: "/more/data"},
        {title: "Registration", path: "/more/reg"},
        {title: "Location Reference Code Lookup", path: "/more/corpus"},
        {title: "Reason Code Lookup", path: "/more/reasons"},
        {title: "Privacy Policy", path: "/more/privacy"},
        {title: "Component Versions", path: "/more/versions"},
        {title: "Statictics", path: "/more/statistics"},
        {title: "Settings", path: "/more/settings"}
    ]
 </script>
 
 <Header {title} />
 
{#each links as item}
<a href={item.path}>
  <div>
    <p>{item.title}</p>
  </div>
</a>
{/each}
 
 <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;
        line-height: 50px;
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
    }
    @media (min-width: 600px) {
        p {
            text-align: center;
        }
    }
 </style>