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

<script>
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import {
        IconCode,
        IconHelp,
        IconInfoCircle,
        IconLocation,
        IconMessageCode,
        IconNumber,
        IconSettings,
        IconSpy,
        IconUser,
        IconUserPlus,
        IconVersions
    } from "@tabler/icons-svelte";
    const title = "More";

    const links = [
        { title: "Your Data", path: "/more/data", icon: IconUser },
        { title: "Registration", path: "/more/reg", icon: IconUserPlus },
        { title: "Settings", path: "/more/settings", icon: IconSettings },
        { title: "Help", path: "/more/help", icon: IconHelp },
        { title: "About", path: "/more/about", icon: IconInfoCircle },
        { title: "Location Reference Code Lookup", path: "/more/corpus", icon: IconLocation },
        { title: "Reason Code Lookup", path: "/more/reasons", icon: IconMessageCode },
        { title: "Privacy Policy", path: "/more/privacy", icon: IconSpy },
        { title: "Component Versions", path: "/more/versions", icon: IconVersions },
        { title: "Statistics", path: "/more/statistics", icon: IconNumber }
    ];
</script>

<Header {title} />

{#each links as item}
    <a href={item.path}>
        <div>
            <svelte:component this={item.icon} />
            <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;
        padding-left: 0.5rem;
        overflow-x: hidden;
        border-right: none;
        height: 50px;
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    a {
        text-decoration: none;
        height: 100%;
        vertical-align: middle;
        overflow-x: hidden;
    }
    p {
        color: white;
        margin: 0;
        padding-left: 10px;
        text-align: left;
        line-height: 50px;
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
        overflow-x: hidden;
    }
    @media (min-width: 600px) {
        p {
            text-align: center;
        }
    }
    @media (max-width: 380px) {
        p {
            font-size: 16px;
        }
    }
</style>