waffle/frontend/src/components/Sidebar.svelte

<script>
    import { HashIcon } from "svelte-feather-icons";
</script>

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

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

    .sidebar-button span {
        margin-left: var(--space-xxs);
    }

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


<div class="sidebar">
    <button class="sidebar-button">
        <HashIcon />
        <span>channel name</span>
    </button>
    <button class="sidebar-button">
        <HashIcon />
        <span>channel name</span>
    </button>
    <button class="sidebar-button">
        <HashIcon />
        <span>channel name</span>
    </button>
</div>