78 lines
1.6 KiB
Svelte
78 lines
1.6 KiB
Svelte
|
<script>
|
||
|
|
const links = [
|
||
|
|
{
|
||
|
|
title: "Home",
|
||
|
|
path: "/",
|
||
|
|
svgPath: "/images/nav/home_icon.svg",
|
||
|
|
pngPath: "/images/nav/home_icon-25.png"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "PIS",
|
||
|
|
path: "/pis",
|
||
|
|
svgPath: "",
|
||
|
|
pngPath: ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "More",
|
||
|
|
path: "/more",
|
||
|
|
svgPath: "/images/nav/hamburger.svg",
|
||
|
|
pngPath: "/images/nav/hamburger.svg"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
import { page } from "$app/stores";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
{#each links as item}
|
||
|
|
<a href={item.path} class:active={$page.url.pathname == item.path}>
|
||
|
|
<picture>
|
||
|
|
<source srcset={item.svgPath} type="svg+xml">
|
||
|
|
<img src="{item.pngPath}" alt="">
|
||
|
|
</picture><br><span>{item.title}</span>
|
||
|
|
</a>
|
||
|
|
{/each}
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
footer {
|
||
|
|
position: fixed;
|
||
|
|
display: flex;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 50px;
|
||
|
|
background-color: rgba(0, 0, 0, 0.123);
|
||
|
|
}
|
||
|
|
|
||
|
|
footer a {
|
||
|
|
flex: 12;
|
||
|
|
width: 30%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: var(--overlay-color);
|
||
|
|
border-style: solid;
|
||
|
|
border-width: 1px;
|
||
|
|
border-top: none;
|
||
|
|
border-bottom: none;
|
||
|
|
border-color: rgba(0, 0, 0, 0.24);
|
||
|
|
text-decoration: double;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer a.active {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
margin: 0;
|
||
|
|
margin-top: 3px;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
margin: 0;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
</style>
|