gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: convert channels list and members list sidebars to use resizable sidebar component

Browse source
This commit is contained in:
SauceyRed 2025-07-16 23:54:50 +02:00
parent b6970ffc1c
commit 0697e60ab9
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 23 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

52
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -1,25 +1,29 @@
<template>
<NuxtLayout name="client">
<div id="middle-left-column" class="main-grid-row">
<div id="server-name-container">
<span id="server-name">{{ server?.name }}</span>
<button id="server-settings-button" @click="toggleGuildSettings">
<Icon id="server-settings-icon" name="lucide:chevron-down" />
</button>
<GuildOptionsMenu v-if="showGuildSettings" />
<ResizableSidebar width="14rem" min-width="10rem" max-width="20rem" border-sides="right">
<div id="middle-left-column" class="main-grid-row">
<div id="server-name-container">
<span id="server-name">{{ server?.name }}</span>
<button id="server-settings-button" @click="toggleGuildSettings">
<Icon id="server-settings-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>
<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>
<MessageArea :channel-url="channelUrlPath" />
<div id="members-container">
<div id="members-list">
<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
<ResizableSidebar width="15rem" min-width="13rem" max-width="30rem" border-sides="left">
<div id="members-container">
<div id="members-list">
<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
</div>
</div>
</div>
</ResizableSidebar>
</NuxtLayout>
</template>
@ -27,7 +31,8 @@
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
import MemberEntry from "~/components/Guild/MemberEntry.vue";
import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
const route = useRoute();
@ -87,18 +92,7 @@ function handleMemberClick(member: GuildMemberResponse) {
</script>
<style>
#middle-left-column {
padding-left: .5em;
padding-right: .5em;
border-right: 1px solid var(--padding-color);
background: var(--optional-channel-list-background);
background-color: var(--sidebar-background-color);
}
#members-container {
min-width: 15rem;
max-width: 15rem;
border-left: 1px solid var(--padding-color);
background: var(--optional-member-list-background);
}