feat: start work on Modal component

components/Banner.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

components/GuildOptionsMenu.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="guild-options-container">
+    <div v-for="setting of settings" class="guild-option" tabindex="0">
+      <button class="guild-option-button" @click="setting.action">{{ setting.name }}</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { InvitePopup } from '#components';
+
+
+const showInviteModal = ref(false);
+
+const settings = [
+  { name: "Server Settings", icon: "lucide:cog" },
+  { name: "Invite", icon: "lucide:letter", action: openInviteModal }
+]
+
+function openInviteModal() {
+  //showInviteModal.value = !showInviteModal.value;
+  //const invitePopup = createApp(InvitePopup);
+  //invitePopup
+}
+
+</script>
+
+<style>
+
+#guild-options-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: rgb(20, 20, 20);
+  top: 8dvh;
+  z-index: 10;
+  width: 100%;
+  position: absolute;
+}
+
+.guild-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 5dvh;
+}
+
+.guild-option:hover {
+  border: var(--outline-border);
+}
+
+.guild-option-button {
+  border: 0;
+  background-color: transparent;
+  color: var(--main-text-color);
+}
+
+</style>

components/Modal.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="modal-top-container">
+    <div v-if="heavy" class="modal-container modal-heavy">
+    </div>
+    <div v-else class="modal-container modal-light">
+    </div>
+    <div class="modal-div">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{ heavy?: boolean }>();
+
+</script>
+
+<style>
+
+.modal-container {
+  position: fixed;
+  border: 1px solid cyan;
+  height: 100%;
+  width: 100%;
+  opacity: 70%;
+  z-index: 10;
+  background-color: var(--background-color);
+}
+
+.modal-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgb(50, 50, 50);
+  opacity: 100%;
+  z-index: 11;
+  padding: 1%;
+}
+
+.modal-top-container {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+</style>

layouts/client.vue

@@ -6,14 +6,21 @@
 				main bar
 			</div>
 			</div>
-				<div id="left-column">
-			<NuxtLink id="home-button" href="/">
-				<Icon name="lucide:house" class="white" size="2rem" />
-			</NuxtLink>
-			<div id="servers-list">
-				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<Icon name="lucide:server" class="white" size="2rem" />
+		<div id="left-column">
+			<div id="left-column-top">
+				<NuxtLink id="home-button" href="/">
+					<Icon name="lucide:house" class="white" size="2rem" />
 				</NuxtLink>
+				<div id="servers-list">
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+						<Icon name="lucide:server" class="white" size="2rem" />
+					</NuxtLink>
+				</div>
+			</div>
+			<div id="left-column-bottom">
+				<button id="join-server-button">
+				<Icon id="join-server-icon" name="lucide:square-plus" />
+				</button>
 			</div>
 		</div>
 		<slot />
@@ -26,6 +33,9 @@ import type { GuildResponse } from '~/types/interfaces';
 const loading = useState("loading", () => false);
 
 const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+for (let i = 0; i < 20; i++) {
+	guilds?.push(guilds[0]);
+}
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("servers:", servers);
@@ -124,13 +134,24 @@ const members = [
 }
 
 #left-column {
+	display: grid;
+	grid-template-rows: 1fr auto;
+	overflow-y: hidden;
+	border-right: 1px solid rgb(70, 70, 70);
+	padding-top: 1dvh;
+	padding-bottom: 1dvh;
+}
+
+#left-column-top {
 	display: flex;
 	flex-direction: column;
-	gap: 2dvh;
-	padding-left: .5dvw;
-	padding-right: .5dvw;
-	border-right: 1px solid rgb(70, 70, 70);
-	padding-top: 1.5dvh;
+	gap: 1.5dvh;
+	overflow-y: scroll;
+}
+
+#left-column-bottom {
+	padding-top: 1dvh;
+	border-top: 1px solid rgb(70, 70, 70);
 }
 
 #middle-left-column {
@@ -148,6 +169,21 @@ const members = [
 	display: flex;
 	flex-direction: column;
 	gap: 1dvh;
+	overflow-y: scroll;
+}
+
+#join-server-button {
+	color: white;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 2rem;
+	padding: 0;
+	display: inline-block;
+}
+
+#join-server-icon {
+	float: left;
 }
 
 </style>

pages/servers/[serverId]/channels/[channelId].vue

@@ -1,21 +1,13 @@
 <template>
 	<NuxtLayout name="client">
 		<div id="middle-left-column" class="main-grid-row">
-			<div id="server-title">
-				<h3>
-					{{ server?.name }}
-					<span>
-						<button @click="showGuildSettings">
-							<Icon name="lucide:settings" />
-						</button>
-					</span>
-					<span>
-						<button @click="toggleInvitePopup">
-							<Icon name="lucide:share-2" />
-						</button>
-					</span>
-					<InvitePopup v-if="showInvitePopup" />
-				</h3>
+			<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" />
+				<InvitePopup v-if="showInvitePopup" />
 			</div>
 			<div id="channels-list">
 				<Channel v-for="channel of channels" :name="channel.name"
@@ -49,6 +41,7 @@ const channels = ref<ChannelResponse[] | undefined>();
 const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
+const showGuildSettings = ref(false);
 
 import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
@@ -72,7 +65,10 @@ onMounted(async () => {
 	console.log("channelid: set loading to false");
 });
 
-function showGuildSettings() { }
+function toggleGuildSettings(e: Event) {
+	e.preventDefault();
+	showGuildSettings.value = !showGuildSettings.value;
+}
 
 function toggleInvitePopup(e: Event) {
 	e.preventDefault();
@@ -132,4 +128,24 @@ function toggleInvitePopup(e: Event) {
 	text-overflow: ellipsis;
 }
 
+#server-name-container {
+	padding-top: 3dvh;
+	padding-bottom: 3dvh;
+	display: flex;
+	justify-content: center;
+	position: relative;
+}
+
+#server-name {
+	font-size: 1.5em;
+}
+
+#server-settings-button {
+	background-color: transparent;
+	font-size: 1em;
+	color: white;
+	border: none;
+	padding: 0%;
+}
+
 </style>