waffle/frontend/src/components/ChannelTopBar.svelte

<script>
    import { Edit2Icon, HashIcon, MenuIcon } from "svelte-feather-icons";
    import { overlayStore, selectedChannel, showSidebar } from "../stores";

    export let channel;
</script>

<style>
    .menu-button {
        margin-right: var(--space-md);
    }
</style>

<div class="top-bar">
    {#if !$showSidebar}
        <button class="icon-button menu-button" on:click="{ () => selectedChannel.set({ id: -1, name: "none", creator_id: -1 }) }">
            <MenuIcon />
        </button>
    {/if}
    <HashIcon />
    <span class="h5 top-bar-heading" on:click="{ () => overlayStore.open('editChannel', {channel}) }">{ channel.name }</span>
</div>