From 1a3135c6c4e00bedd2cfb7f3d9ba723fd9fe79ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Sat, 20 Apr 2024 20:59:30 -0400
Subject: [PATCH] refactor(pages, components): rearrange layout

sidebars now open beside the actual page content instead of beside the body
---
 layouts/default.vue | 127 ++++++++++++++++++++++++--------------------
 1 file changed, 68 insertions(+), 59 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 10ec25f..b8690b6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -50,67 +50,76 @@
 			<i> Nothing here but crickets. </i>
 		</template>
 		<a-layout class="ylayout">
-			<a-layout-header class="alayhead">
-				<div style="display: flex; align-items: center; flex-wrap: wrap">
-					<div class="siteTitle">Rockfic</div>
-					<div class="stat-block">
-						<div>
-							<a-typography-text> Band fiction that rocks </a-typography-text>
-							<a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
-						</div>
-					</div>
-					<navbar v-if="!!bp['md']" :inline="false" />
-				</div>
-				<a-button class="mobileTrigger" type="primary" @click="() => (collapsed = !collapsed)" v-if="!bp['md']">
-					<menu-unfold-outlined v-if="nav" />
-					<menu-fold-outlined v-else />
-				</a-button>
-			</a-layout-header>
-			<a-layout class="mlayout" has-sider style="padding-top: 1em">
-				<a-layout-sider :trigger="null" :collapsed="true" :collapsed-width="0" :collapsible="true" v-model:collapsed="collapsed" v-if="!bp['md']">
-					<navbar inline />
-				</a-layout-sider>
-				<a-layout-content style="flex-grow: 1">
-					<slot />
-				</a-layout-content>
-				<a-layout-sider
-					:zero-width-trigger-style="{
-						background: '#e92662',
-						padding: '1.2em',
-						position: 'fixed',
-						right: 0,
-						borderRadius: '15%',
-						color: 'white',
-						border: '2.4px solid #fffFFF80',
-						top: '75vh',
-						'z-index': 99999999,
-					}"
-					:theme="darko ? 'dark' : 'light'"
-					:breakpoint="'lg'"
-					v-model:collapsed="collapsed"
-					:collapsible="true"
-					:collapsed-width="0"
-					:style="{
-						color: col,
-						height: '100%',
-						position: 'fixed',
-						right: '0px',
-						borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
-					}"
-				>
-					<sidebar-thing />
-					<template #trigger>
-						<div class="outerst" @click="() => (collapsed = !collapsed)">
-							<div :class="sideTriggerVal">
-								<icon istyle="solid" name="chevron-right" :size="30" />
+			<a-layout>
+				<a-layout-header class="alayhead" :style="{ backgroundColor: darkBool ? '#141414' : '#f5f5f5' }">
+					<div style="display: flex; align-items: center; flex-wrap: wrap">
+						<div class="siteTitle">Rockfic</div>
+						<div class="stat-block">
+							<div>
+								<a-typography-text> Band fiction that rocks </a-typography-text>
+								<a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
 							</div>
 						</div>
-					</template>
-				</a-layout-sider>
+						<navbar v-if="!!bp['md']" :inline="false" />
+					</div>
+					<a-button class="mobileTrigger" type="primary" @click="() => (nav = !nav)" v-if="!bp['md']">
+						<menu-unfold-outlined v-if="nav" />
+						<menu-fold-outlined v-else />
+					</a-button>
+				</a-layout-header>
+				<a-layout class="mlayout" has-sider style="padding-top: 1em">
+					<a-layout-sider
+						:trigger="null"
+						:theme="darkBool ? 'dark' : 'light'"
+						:collapsed="nav"
+						:collapsed-width="0"
+						:collapsible="true"
+						v-model:collapsed="collapsed"
+						v-if="!bp['md']"
+					>
+						<navbar inline />
+					</a-layout-sider>
+					<a-layout-content style="flex-grow: 1">
+						<slot />
+					</a-layout-content>
+					<a-layout-sider
+						:zero-width-trigger-style="{
+							background: '#e92662',
+							padding: '1.2em',
+							position: 'fixed',
+							right: 0,
+							borderRadius: '15%',
+							color: 'white',
+							border: '2.4px solid #fffFFF80',
+							top: '75vh',
+							'z-index': 99999999,
+						}"
+						:theme="darko ? 'dark' : 'light'"
+						:breakpoint="'lg'"
+						v-model:collapsed="collapsed"
+						:collapsible="true"
+						:collapsed-width="0"
+						:style="{
+							color: col,
+							right: '-3px',
+							alignSelf: 'stretch',
+							borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
+						}"
+					>
+						<sidebar-thing />
+						<template #trigger>
+							<div class="outerst" @click="() => (collapsed = !collapsed)">
+								<div :class="sideTriggerVal">
+									<icon istyle="solid" name="chevron-right" :size="30" />
+								</div>
+							</div>
+						</template>
+					</a-layout-sider>
+				</a-layout>
+				<a-layout-footer style="bottom: 100%">
+					<cfooter />
+				</a-layout-footer>
 			</a-layout>
-			<a-layout-footer style="bottom: 100%">
-				<cfooter />
-			</a-layout-footer>
 		</a-layout>
 		<!-- <div class="mlayout">
 		<a-skeleton/>
@@ -137,7 +146,7 @@
 
 	.sideWrap {
 		height: 100vh;
-		right: -1rem;
+		right: -3rem;
 		width: inherit;
 		/* display: flex;
 		flex-direction: column;