dashboard/frontend/src/components/NavElement.svelte
2023-04-13 19:42:25 +01:00

55 lines
1020 B
Svelte

<div class="nav-element">
{#if link}
<a href="{link}" class="link row" on:click>
<div class="icon">
<i class="{icon}"></i>
</div>
<slot/>
</a>
{:else}
<a class="link row" on:click>
<div class="icon">
<i class="{icon}"></i>
</div>
<slot/>
</a>
{/if}
</div>
<script>
export let icon;
export let link = undefined;
</script>
<style>
.row {
display: flex;
flex-direction: row;
}
:global(.link) {
display: flex;
color: inherit;
text-decoration: none;
cursor: pointer;
text-align: center;
}
:global(.link-blue) {
color: #3472f7;
text-decoration: none;
cursor: pointer;
text-align: center;
}
.icon {
width: 24px;
}
@media only screen and (max-width: 1154px) {
.nav-element {
padding: 15px 0 10px 15px !important;
}
}
</style>