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

73 lines
1.8 KiB
Svelte
Raw Normal View History

<script>
import { HashIcon } from "svelte-feather-icons";
import { channels, 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>
{/each}
</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%;
width: 255px;
max-width: 255px;
}
.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;
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.selected,
.sidebar-button:hover {
background-color: var(--background-color-2);
2022-04-15 02:39:13 +03:00
}
</style>