93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<!-- TODO -->
|
|
|
|
<template>
|
|
<ResizableSidebar
|
|
width="14rem" min-width="8rem" max-width="30rem"
|
|
border-sides="right" local-storage-name="middleLeftColumn">
|
|
|
|
<div id="guild-sidebar">
|
|
<div id="guild-top-container">
|
|
<span id="guild-name" :title="props.guild?.name">{{ props.guild?.name }}</span>
|
|
<button id="guild-settings-button" @click="toggleGuildSettings">
|
|
<Icon name="lucide:chevron-down" />
|
|
</button>
|
|
|
|
<GuildOptionsMenu v-if="showGuildSettings" />
|
|
</div>
|
|
<div id="channels-list">
|
|
<ChannelEntry v-for="channel of channels"
|
|
:name="channel.name"
|
|
:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
|
|
:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
|
|
</div>
|
|
</div>
|
|
</ResizableSidebar>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
|
|
import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
|
|
import type { ChannelResponse, GuildResponse, INavbar } from "~/types/interfaces";
|
|
|
|
const props = defineProps<{
|
|
guild: GuildResponse
|
|
}>();
|
|
|
|
const route = useRoute();
|
|
const { fetchChannels } = useApi();
|
|
|
|
const showGuildSettings = ref(false);
|
|
|
|
const channels: ChannelResponse[] = await fetchChannels(props.guild.uuid);
|
|
|
|
function toggleGuildSettings(e: Event) {
|
|
e.preventDefault();
|
|
showGuildSettings.value = !showGuildSettings.value;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
#guild-top-container {
|
|
min-height: var(--navbar-height);
|
|
max-height: var(--navbar-height);
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
border-bottom: 1px solid var(--padding-color);
|
|
}
|
|
|
|
#guild-name {
|
|
font-size: 1.5em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#guild-settings-button {
|
|
background-color: transparent;
|
|
font-size: 1em;
|
|
color: white;
|
|
border: none;
|
|
padding: 0%;
|
|
}
|
|
|
|
#channels-list {
|
|
background: var(--optional-channel-list-background);
|
|
background-color: var(--sidebar-background-color);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .5em;
|
|
text-overflow: ellipsis;
|
|
|
|
padding-top: .5em;
|
|
padding-bottom: .5em;
|
|
max-height: calc(100% - 1em); /* 100% - top and bottom padding */
|
|
|
|
padding-left: .5em;
|
|
padding-right: .5em;
|
|
}
|
|
</style>
|