46 lines
843 B
Svelte

<script>
import { page } from '$app/stores';
export let href = '/';
$: current = (href == $page.url.pathname);
</script>
<li class:selected="{current === true}"><a {href}><slot/></a></li>
<style>
li {
width: 160px;
text-align: center;
list-style: none;
display: inline-block;
position: relative;
margin-left: 7x;
margin-right: 7px;
align-items: center;
user-select: none;
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-duration: 0.1s;
}
a {
color: var(--white);
text-decoration: none;
font-size: 1.25rem;
user-select: none;
}
li:hover {
font-weight: 500;
border: 3px solid var(--grey-two);
padding: 10px 30px;
border-radius: 200px;
}
li.selected {
font-weight: 600;
border: 3px solid var(--red);
padding: 10px 30px;
border-radius: 200px;
}
</style>