waffle/frontend/src/components/Sidebar.svelte

97 lines
2.5 KiB
Svelte
Raw Normal View History

<script>
2022-04-26 03:01:21 +03:00
import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
2022-04-26 03:09:16 +03:00
import { channels, overlayStore, selectedChannel } from "../stores";
import UserTopBar from "./UserTopBar.svelte";
</script>
<div class="sidebar-container">
<UserTopBar />
<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 class="icon-button icon-button-auto" on:click|stopPropagation="{ () => overlayStore.open('editChannel', { channel }) }">
2022-04-26 03:01:21 +03:00
<MoreVerticalIcon />
</button>
</button>
{/each}
<button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
<div>
<PlusIcon />
</div>
<span>Create Channel</span>
</button>
</div>
</div>
2022-04-15 02:39:13 +03:00
<style>
.sidebar-container {
background-color: var(--background-color-1);
border-right: 1px solid var(--background-color-2);
2022-04-15 02:39:13 +03:00
height: 100%;
min-width: 255px;
max-width: 255px;
}
@media screen and (max-width: 768px) {
.sidebar-container {
flex-basis: 100%;
min-width: unset;
max-width: unset;
}
}
.sidebar {
width: 100%;
height: 100%;
padding: var(--space-xs);
}
.sidebar-button {
display: flex;
align-items: center;
justify-content: left;
border: none;
background-color: var(--background-color-1);
padding: var(--space-xs);
margin-bottom: var(--space-xxs);
color: currentColor;
font: inherit;
border-radius: var(--radius-md);
width: 100%;
max-height: 3.4em;
}
.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;
}
2022-04-26 03:01:21 +03:00
.sidebar-button .icon-button {
visibility: hidden;
}
.sidebar-button:hover .icon-button {
visibility: visible;
}
.sidebar-button.selected,
.sidebar-button:hover {
background-color: var(--background-color-2);
2022-04-15 02:39:13 +03:00
}
</style>