<script>
    const links = [
        {
            title: "Home",
            path: "/",
            icon: IconHome,
        },
        {
            title: "PIS Finder",
            path: "/pis/",
            icon: IconDialpad,
        },
        {
            title: "Menu",
            path: "/more/",
            icon: IconMenu2,
        },
    ];
    import { page } from "$app/stores";
    import { IconHome, IconMenu2, IconDialpad } from "@tabler/icons-svelte";
</script>

<footer>
    {#each links as item}
        <a href={item.path} class:active={$page.url.pathname == item.path || $page.url.pathname == item.path + "/"}>
            <svelte:component this={item.icon} />
            <br />
            <span>{item.title}</span>
        </a>
    {/each}
</footer>

<style>
    footer {
        position: fixed;
        display: flex;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: rgb(54, 54, 54);
        box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.19);
    }

    footer a {
        flex: 12;
        width: 30%;
        height: 100%;
        background-color: var(--island-bg-solid);
        border-style: solid;
        border-width: 1px;
        border-top: none;
        border-bottom: none;
        border-color: var(--box-shadow-color);
        text-decoration: double;
        color: var(--main-text-color);
        font-weight: 600;
    }

    footer a.active {
        background-color: transparent;
    }

    span {
        margin: 0;
        margin-bottom: 3px;
        padding: 0;
    }
</style>
