You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.1 KiB
36 lines
1.1 KiB
2 years ago
|
<script>
|
||
|
|
import Icon from "$/client/components/Icon.svelte";
|
||
|
|
|
||
|
|
export let menu = [
|
||
|
|
{title: "Calendar", active: false, icon: "calendar"},
|
||
|
|
{title: "Cards", active: false, icon: "credit-card"},
|
||
|
|
{title: "Countdown", active: false, icon: "clock"},
|
||
|
|
{title: "Darkmode", active: false, icon: "sunrise"},
|
||
|
|
{title: "Form", active: false, icon: "database"},
|
||
|
|
{title: "Video", active: false, icon: "video"},
|
||
|
|
{title: "Sidebar", active: false, icon: "sidebar"},
|
||
|
|
];
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<sidebar>
|
||
|
|
<top><h1>CSS Only</h1></top>
|
||
|
|
|
||
|
|
<items>
|
||
|
|
{#each menu as item}
|
||
|
|
<a data-testid="sidebar-link-{ item.title }"
|
||
|
|
class:with-icon={ item.icon !== undefined }
|
||
|
|
class:without-icon={ !item.icon}
|
||
|
|
class:active={ item.active }
|
||
|
|
href="/client/#/bando/components/SidebarCSS/">
|
||
|
|
{#if item.icon}
|
||
|
|
<Icon size="24" name={ item.icon } light={ item.active } /> <span class="with-icon">{ item.title }</span>
|
||
|
|
{:else}
|
||
|
|
<span class="without-icon">{ item.title }</span>
|
||
|
|
{/if}
|
||
|
|
</a>
|
||
|
|
{/each}
|
||
|
|
</items>
|
||
|
|
</sidebar>
|
||
|
|
</main>
|