refactor(pages, components): rearrange layout

sidebars now open beside the actual page content instead of beside the body

layouts/default.vue

@@ -50,7 +50,8 @@
 			<i> Nothing here but crickets. </i>
 		</template>
 		<a-layout class="ylayout">
-			<a-layout-header class="alayhead">
+			<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">
@@ -61,13 +62,21 @@
 						</div>
 						<navbar v-if="!!bp['md']" :inline="false" />
 					</div>
-				<a-button class="mobileTrigger" type="primary" @click="() => (collapsed = !collapsed)" v-if="!bp['md']">
+					<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" :collapsed="true" :collapsed-width="0" :collapsible="true" v-model:collapsed="collapsed" v-if="!bp['md']">
+					<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">
@@ -92,9 +101,8 @@
 						:collapsed-width="0"
 						:style="{
 							color: col,
-						height: '100%',
-						position: 'fixed',
-						right: '0px',
+							right: '-3px',
+							alignSelf: 'stretch',
 							borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
 						}"
 					>
@@ -112,6 +120,7 @@
 					<cfooter />
 				</a-layout-footer>
 			</a-layout>
+		</a-layout>
 		<!-- <div class="mlayout">
 		<a-skeleton/>
 		<a-skeleton/>
@@ -137,7 +146,7 @@
 
 	.sideWrap {
 		height: 100vh;
-		right: -1rem;
+		right: -3rem;
 		width: inherit;
 		/* display: flex;
 		flex-direction: column;