<script>
    import { HashIcon, MenuIcon } from "svelte-feather-icons";
    import { overlayStore, 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="{ () => showSidebar.set(true) }">
            <MenuIcon />
        </button>
    {/if}
    <HashIcon />
    <span class="h5 top-bar-heading" on:click="{ () => overlayStore.open('editChannel', {channel}) }">{ channel.name }</span>
</div>
