This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
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.
pixelperfectionist/admin/bando/demos/SidebarCSS.svelte

36 lines
1.1 KiB

<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>