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

style(ui): change styling of left column so it includes guild creation and joining button

Browse source
This commit is contained in:
SauceyRed 2025-07-13 04:19:50 +02:00
parent e27b1cfc9d
commit 569bca810e
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 30 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

55
layouts/client.vue
View file

@ -10,23 +10,27 @@
</div> </div>
<div id = "page-content"> <div id = "page-content">
<div id="left-column"> <div id="left-column">
<NuxtLink id="home-button" href="/me"> <div id="left-column-top">
<img class="sidebar-icon" src="/public/icon.svg"/> <NuxtLink id="home-button" href="/me">
</NuxtLink> <img class="sidebar-icon" src="/public/icon.svg"/>
<div id="servers-list"> </NuxtLink>
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`"> <div id="servers-list">
<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/> <NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" /> <img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
</NuxtLink>
</div>
</div>
<div id="left-column-bottom">
<div ref="createButtonContainer">
<button id="create-button" @click.prevent="createDropdown">
<Icon id="create-icon" name="lucide:square-plus" />
</button>
</div>
<NuxtLink id="settings-menu" href="/settings">
<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
</NuxtLink> </NuxtLink>
</div> </div>
<div ref="joinServerButton" id="left-column-bottom">
<button id="join-server-button" @click.prevent="createDropdown">
<Icon id="join-server-icon" name="lucide:square-plus" />
</button>
</div>
<NuxtLink id="settings-menu" href="/settings">
<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
</NuxtLink>
</div> </div>
<slot /> <slot />
</div> </div>
@ -42,7 +46,7 @@ import type { GuildResponse } from '~/types/interfaces';
const loading = useState("loading", () => false); const loading = useState("loading", () => false);
const joinServerButton = ref<HTMLButtonElement>(); const createButtonContainer = ref<HTMLButtonElement>();
const api = useApi(); const api = useApi();
@ -179,8 +183,8 @@ function createDropdown() {
const dropdown = h(Dropdown, { options }); const dropdown = h(Dropdown, { options });
const div = document.createElement("div"); const div = document.createElement("div");
div.classList.add("dropdown", "destroy-on-click"); div.classList.add("dropdown", "destroy-on-click");
if (joinServerButton.value) { if (createButtonContainer.value) {
joinServerButton.value.appendChild(div); createButtonContainer.value.appendChild(div);
} else { } else {
document.body.appendChild(div); document.body.appendChild(div);
} }
@ -239,6 +243,8 @@ function createDropdown() {
#left-column { #left-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
align-items: center;
gap: .75em; gap: .75em;
padding-left: .25em; padding-left: .25em;
padding-right: .25em; padding-right: .25em;
@ -248,9 +254,11 @@ function createDropdown() {
background-color: var(--sidebar-background-color); background-color: var(--sidebar-background-color);
} }
#left-column-top { #left-column-top, #left-column-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.5dvh; gap: 1.5dvh;
overflow-y: scroll; overflow-y: scroll;
} }
@ -279,8 +287,8 @@ function createDropdown() {
padding-top: .5em; padding-top: .5em;
} }
#join-server-button { #create-button {
color: white; color: var(--primary-color);
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -289,7 +297,7 @@ function createDropdown() {
display: inline-block; display: inline-block;
} }
#join-server-icon { #create-icon {
float: left; float: left;
} }
@ -316,9 +324,6 @@ function createDropdown() {
} }
#settings-menu { #settings-menu {
position: absolute;
bottom: .25em;
color: var(--primary-color) color: var(--primary-color)
} }