95 lines
1.5 KiB
Svelte
95 lines
1.5 KiB
Svelte
<script>
|
|
import Icon from "../utils/Icon.svelte";
|
|
import Form from "../utils/Form.svelte";
|
|
|
|
export let href;
|
|
export let icon;
|
|
export let text;
|
|
export let action = false;
|
|
export let hovered = false;
|
|
|
|
function onMouseEnter() {
|
|
hovered = true;
|
|
}
|
|
|
|
function onMouseLeave() {
|
|
hovered = false;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../../scss/helpers";
|
|
|
|
li {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 8px;
|
|
|
|
line-height: 1;
|
|
|
|
@mixin aHover {
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
|
|
@include darkMode {
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 8px;
|
|
|
|
white-space: nowrap;
|
|
|
|
border-radius: 3px;
|
|
|
|
text-transform: uppercase;
|
|
|
|
@include medium-le {
|
|
&:hover {
|
|
@include aHover;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include large-ge {
|
|
&:hover > a {
|
|
@include aHover;
|
|
}
|
|
}
|
|
|
|
:global(form) {
|
|
width: 100%;
|
|
|
|
:global(button) {
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
:global(.icon) {
|
|
--icon-size: 16px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<li on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
|
|
{#if action}
|
|
<Form action={href} submitIcon={icon} submitText={text}/>
|
|
{:else}
|
|
<a href={href}>
|
|
<Icon name={icon}/>
|
|
<span class="tip">{text}</span></a>
|
|
{/if}
|
|
<slot/>
|
|
</li>
|