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

Fix sidebar and make it configurable thru themes #40

Merged
twig merged 4 commits from fix-sidebar into main 2025-07-16 02:43:33 +00:00
Conversation 1 Commits 4 Files changed 6 +8 -16
6 changed files with 8 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 06de4777f9 - Show all commits

14
layouts/client.vue
View file

@ -21,14 +21,6 @@
<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/> <NuxtImg 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" /> <Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
</NuxtLink> </NuxtLink>
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<NuxtImg 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>
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<NuxtImg 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>
<VerticalSpacer /> <VerticalSpacer />
<div class="left-column-segment"> <div class="left-column-segment">
@ -290,12 +282,12 @@ function createDropdown() {
} }
#home-button { #home-button {
height: 3em; height: var(--sidebar-width);
} }
.sidebar-icon { .sidebar-icon {
width: 3rem; width: var(--sidebar-width);
height: 3rem; height: var(--sidebar-width);
} }
.sidebar-bottom-buttons { .sidebar-bottom-buttons {

2
public/themes/ash.css
View file

@ -12,7 +12,7 @@
--padding-color: #e0e0e0; --padding-color: #e0e0e0;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/dark.css
View file

@ -19,7 +19,7 @@
--accent-color: #b35719; --accent-color: #b35719;
--accent-highlighted-color: #c76a2e; --accent-highlighted-color: #c76a2e;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/description.css
View file

@ -20,7 +20,7 @@
--accent-color: #ff218c80; --accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80; --accent-highlighted-color: #df1b6f80;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/light.css
View file

@ -12,7 +12,7 @@
--padding-color: #484848; --padding-color: #484848;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/rainbow-capitalism.css
View file

@ -19,7 +19,7 @@
--accent-color: #ff218c80; --accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80; --accent-highlighted-color: #df1b6f80;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;