mirror of
https://github.com/wukko/cobalt.git
synced 2025-02-12 13:46:22 +01:00
55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
|
|
export let categoryName: string;
|
|
export let categoryLink: string;
|
|
export let iconColor: "gray" | "blue" | "green" = "gray";
|
|
|
|
$: isActive = $page.url.pathname === `/settings/${categoryLink}`;
|
|
</script>
|
|
|
|
<a
|
|
id="settings-category"
|
|
href="/settings/{categoryLink}"
|
|
class:active={isActive}
|
|
>
|
|
<div id="category-icon" style="background: var(--{iconColor})">
|
|
<slot></slot>
|
|
</div>
|
|
<span>{categoryName}</span>
|
|
</a>
|
|
|
|
<style>
|
|
#settings-category {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px;
|
|
font-weight: 500;
|
|
background: var(--primary);
|
|
color: var(--button-text);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
#settings-category:hover {
|
|
background: var(--button-hover-transparent);
|
|
}
|
|
|
|
#settings-category span {
|
|
font-size: 14.5px;
|
|
}
|
|
|
|
#category-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#settings-category.active {
|
|
background: var(--secondary);
|
|
color: var(--primary);
|
|
}
|
|
</style>
|