diff --git a/layouts/client.vue b/layouts/client.vue index 36e592a..197d530 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -25,6 +25,23 @@ +
+
+ + + +
+ + + + +
+ + + +
+ +
@@ -52,9 +69,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); .visible { opacity: 100%; transition: opacity 500ms; + transition: opacity 500ms; } #homebar { + min-height: 4dvh; min-height: 4dvh; display: flex; justify-content: space-evenly; @@ -62,6 +81,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); background: var(--optional-topbar-background); background-color: var(--topbar-background-color); border-bottom: 1px solid var(--padding-color); + border-bottom: 1px solid var(--padding-color); padding-left: 5dvw; padding-right: 5dvw; @@ -80,6 +100,9 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); flex-direction: row; flex-grow: 1; overflow: auto; + flex-direction: row; + flex-grow: 1; + overflow: auto; } #left-column { @@ -88,12 +111,23 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); gap: .75em; padding-left: .25em; padding-right: .25em; + gap: .75em; + padding-left: .25em; + padding-right: .25em; border-right: 1px solid var(--padding-color); background: var(--optional-sidebar-background); background-color: var(--sidebar-background-color); padding-top: .5em; } +#servers-list { + display: flex; + flex-direction: column; + gap: 1em; + width: 3.2rem; + padding-top: .5em; +} + #servers-list { display: flex; flex-direction: column; @@ -102,6 +136,8 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); } #middle-left-column { + padding-left: .25em; + padding-right: .25em; padding-left: .25em; padding-right: .25em; border-right: 1px solid var(--padding-color); @@ -110,6 +146,14 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); overflow-x: hidden; } +.sidebar-icon { + width: 3rem; + height: 3rem; + min-width: 10em; + overflow-y: scroll; + overflow-x: hidden; +} + .sidebar-icon { width: 3rem; height: 3rem; @@ -123,6 +167,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); #settings-menu { position: absolute; bottom: .25em + bottom: .25em } \ No newline at end of file