refactor: move MemberList and GuildSidebar out of client.vue

components/Guild/GuildSidebar.vue

@@ -0,0 +1,90 @@
+<!-- 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>
+#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 */
+}
+
+#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%;
+}
+</style>

components/Guild/MemberEntry.vue

@@ -32,7 +32,13 @@ function hideModalPopup() {
 
 <style>
 .member-item {
-    position: relative;
+	display: flex;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+	align-items: center;
+	text-align: left;
+	cursor: pointer;
 }
 
 .member-avatar {
@@ -41,4 +47,9 @@ function hideModalPopup() {
 	min-width: 2.3em;
 	max-width: 2.3em;
 }
+
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 </style>

components/Guild/MemberList.vue

@@ -0,0 +1,44 @@
+<template>
+	<ResizableSidebar
+			width="14rem" min-width="5.5rem" max-width="30rem"
+			border-sides="left" local-storage-name="membersListWidth">
+		<div id="members-container">
+			<div id="members-list">
+				<MemberEntry v-for="member of members.objects" :member="member" tabindex="0"/>
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
+import MemberEntry from "./MemberEntry.vue";
+import type { GuildResponse } from "~/types/interfaces";
+
+const props = defineProps<{
+    guild: GuildResponse
+}>();
+
+const { fetchMembers } = useApi();
+
+// TODO implement paging
+const members = await fetchMembers(props.guild.uuid)
+
+</script>
+
+<style scoped>
+#members-container {
+	background: var(--optional-member-list-background);
+
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+}
+
+#members-list {
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+</style>