<script lang="ts">
    import { browser } from "$app/environment";
    import { RiAddCircleLine, RiChat2Line, RiCompassDiscoverLine, RiHome2Line, RiHomeLine, RiNotificationLine } from "svelte-remixicon";

function rickroll (){
    if (browser) {
        window.open( "https://youtu.be/dQw4w9WgXcQ" );
    }
}
</script>

<footer class="mobileonly">
  <ul class="row">
    <li><a href="/" title="Homepage"><RiHome2Line size="2em" /></a></li>
    <li><a href="/" title="Discover"><RiCompassDiscoverLine size="2em" /></a></li>
    <li><a href="/new" title="Create"><RiAddCircleLine size="2em" /></a></li>
    <li><a href="/user/yusur" title="Messages"><RiChat2Line size="2em" /></a></li>
    <li><a href="?" onclick={rickroll} title="Notifications"><RiNotificationLine size="2em" /></a></li>
  </ul>
</footer>

<style>

footer {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--background);
    box-shadow: 0 0 6px var(--border);
    z-index: 150;
}

ul.row {
    align-items: stretch;
    justify-content: stretch;
}

ul.row > li {
    flex: 1;
    padding: .5em;
    margin: 0;
    text-align: center;
}
</style>