waffle/frontend/src/components/pages/main/Sidebar.svelte

<script>
    import { HashIcon } from "svelte-feather-icons";
    import { channels, selectedChannel } from "../../../stores";
</script>

<div class="sidebar">
    {#each $channels as channel (channel.id)}
        <button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
            <div>
                <HashIcon />
            </div>
            <span>{ channel.name }</span>
        </button>
    {/each}
</div>

<style>
    .sidebar {
        height: 100%;
        width: 255px;
        max-width: 255px;
        padding: var(--space-sm);
        background-color: var(--background-color-1);
        border-right: 1px solid var(--background-color-2);
    }

    .sidebar-button {
        display: flex;
        align-items: center;
        justify-content: left;
        border: none;
        background-color: var(--background-color-1);
        padding: var(--space-sm);
        margin-bottom: var(--space-xxs);
        color: currentColor;
        font: inherit;
        border-radius: var(--radius-md);
        width: 100%;
        height: 3.4em;
        text-align: center;
    }

    .sidebar-button span {
        margin-left: var(--space-xxs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-button div {
        display: inline;
        flex-shrink: 0;

        /* TODO: HACK! */
        width: 24px;
        height: 24px;
    }

    .sidebar-button.selected,
    .sidebar-button:hover {
        background-color: var(--background-color-2);
    }
</style>