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

62 lines
1.4 KiB
Svelte
Raw Normal View History

<script>
import { HashIcon } from "svelte-feather-icons";
import { channels } from "../../../stores";
</script>
<div class="sidebar">
{#each $channels as channel (channel.id)}
<button class="sidebar-button" >
<div>
<HashIcon />
</div>
<span>{ channel.name }</span>
</button>
{/each}
</div>
2022-04-15 02:39:13 +03:00
<style>
.sidebar {
height: 100%;
width: 255px;
max-width: 255px;
padding: var(--space-sm);
background-color: var(--background-color-1);
}
.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:hover {
background-color: var(--background-color-2);
2022-04-15 02:39:13 +03:00
}
</style>