From 521618f9558ce25ad4e5e3df4fbfa125585165a5 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: Thu, 5 Oct 2023 01:59:23 -0400
Subject: [PATCH] refactor(components): update default layout

---
 layouts/default.vue | 255 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 214 insertions(+), 41 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 766e645..f67d977 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,74 +2,247 @@
 	import { theme } from "ant-design-vue";
 	import navbar from "~/components/layouts/navbar.vue";
 	import cfooter from "~/components/layouts/footer.vue";
+	import sidebarThing from "~/components/layouts/sidebar.vue";
 	import icon from "~/components/icon.vue";
+	import { ISidebarItem } from "~/models/sidebarEntry";
 	const { useToken } = theme;
 	const { token } = useToken();
 
-	const { data: totals }: any = await useApiFetch("/totals");
+	const col = token.value.colorText;
 
+	const { data: totals } = await useApiFetch<any>("/totals");
+
+	const collapsed = ref<boolean>(true);
+
+	const sideTriggerVal = computed(() => {
+		let th = collapsed.value ? " collapsed" : "";
+		return `sider-trigger${th}`;
+	});
+
+	// const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar")
+	// provide("sidebar-items", rd.data)
+
+	provide("collapsed", collapsed);
+	const loaded = inject<Ref<boolean>>("loaded");
 	let darko = inject("dark");
 </script>
 <template>
-	<a-layout style="padding: 10px; background: unset !important">
-		<a-layout-header class="alayhead">
-			<div style="display: flex; align-items: center">
-				<a-typography-title
-					class="siteTitle"
-					:style="{
-						color: '#ff2883',
-						fontFamily: 'jandles',
-						fontSize: '5em',
-						margin: 0,
-					}"
-				>
-					Rockfic
-				</a-typography-title>
-				<div style="display: flex; flex-direction: column">
-					<a-typography-text> Band fiction that rocks </a-typography-text>
-					<br />
-					<a-typography-text type="secondary">
-						With {{ totals.stories }} stories by {{ totals.authors }} authors
-					</a-typography-text>
+	<a-layout class="ylayout" has-sider>
+		<a-layout class="mlayout">
+			<a-layout-header class="alayhead">
+				<div style="display: flex; align-items: center; flex-wrap: wrap">
+					<a-typography-title class="siteTitle"> Rockfic </a-typography-title>
+					<div class="stat-block">
+						<div>
+							<a-typography-text> Band fiction that rocks </a-typography-text>
+							<a-typography-text type="secondary">
+								With {{ totals.stories }} stories by
+								{{ totals.authors }} authors
+							</a-typography-text>
+						</div>
+					</div>
+					<navbar />
+				</div>
+			</a-layout-header>
+			<a-layout-content>
+				<slot />
+				<!-- <a-float-button
+					type="primary"
+					:style="{ height: '50px', width: '50px' }"
+					tooltip="Post a new Story" @click="() => navigateTo('/new-story')"
+				>
+					<template #icon>
+						<icon istyle="regular" name="file-plus" />
+					</template>
+				</a-float-button> -->
+			</a-layout-content>
+			<a-layout-footer style="bottom: 100%">
+				<cfooter />
+			</a-layout-footer>
+		</a-layout>
+		<a-layout-sider
+			:theme="darko ? 'dark' : 'light'"
+			:breakpoint="'md'"
+			:trigger="null"
+			v-model:collapsed="collapsed"
+			:collapsible="true"
+			:style="{
+				color: col,
+			}"
+		>
+			<sidebar-thing />
+			<div class="outerst" @click="() => (collapsed = !collapsed)">
+				<div :class="sideTriggerVal">
+					<icon istyle="solid" name="chevron-right" :size="30" />
 				</div>
-				<navbar />
 			</div>
-		</a-layout-header>
-		<a-layout-content>
-			<slot />
-			<a-float-button
-				type="primary"
-				:style="{ height: '50px', width: '50px' }"
-				tooltip="Post a new Story"
-			>
-				<template #icon>
-					<icon istyle="regular" name="file-plus" />
-				</template>
-			</a-float-button>
-		</a-layout-content>
-		<a-layout-footer>
-			<cfooter />
-		</a-layout-footer>
+		</a-layout-sider>
 	</a-layout>
+	<!-- <div class="mlayout">
+		<a-skeleton/>
+		<a-skeleton/>
+		<a-skeleton/>
+		<a-skeleton/>
+		<a-skeleton/>
+		<a-skeleton/>
+		</div> -->
 </template>
 
 <style scoped>
+	.stat-block {
+		display: inline-block;
+	}
+
+	.sideWrap {
+		height: 100vh;
+		right: -1rem;
+		width: inherit;
+		/* display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 100%;
+		padding-bottom: 2em;
+		overflow-x: "clip";
+		height: "100vh";
+		width: 80px !important;
+		top: 0;
+		bottom: 0;
+		border-left: 2px solid #ffcbe5; */
+	}
+
+	.sideWrap > * {
+		position: fixed;
+		right: 50;
+	}
+
+	.stat-block > div {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.outerst {
+		width: 100%;
+		justify-content: center;
+		position: fixed;
+		top: 75vh;
+		transform: translateX(15px);
+		/* height: 100vh; */
+		/* overflow-y: scroll; */
+	}
+
+	.mlayout,
+	footer {
+		padding: 1.5em;
+	}
+
+	@media (min-width: 760px) {
+		.stat-block > div {
+		}
+
+		.mlayout {
+			padding: 3em;
+		}
+
+		.mlayout > footer {
+			padding: 0;
+			/* padding-right: calc(4em + 90px); */
+		}
+
+		.mlayout {
+			/* padding-right: calc(4em + 90px); */
+			background: unset !important;
+		}
+
+		.alayhead {
+			display: inline-block;
+			flex-direction: row;
+			align-items: center;
+			/* background: inherit !important;  */
+			height: unset !important;
+			margin-bottom: 1.5em;
+			width: 100%;
+			/* margin-right: auto; */
+		}
+
+		.alayhead > div {
+			width: 100% !important;
+		}
+
+		.siteTitle {
+			display: inline-block;
+			min-width: unset !important;
+		}
+
+		.alayhead > div {
+			flex-direction: row !important;
+		}
+	}
+
 	.siteTitle {
-		min-width: max-content;
+		/* min-width: max-content; */
 		font-weight: normal;
+		color: #ff2883 !important;
+		font-family: "jandles";
+		font-size: 5em;
+		margin: 0;
+		display: block;
+		min-width: 100%;
 		/* float: left; */
 	}
 
+	.sider-trigger {
+		/* display: flex; */
+		/* padding-left: 4.8em;
+	padding-right: 1.8em; */
+	}
+
+	.sider-trigger.collapsed i {
+		/* transform: rotate3d(0, 1, 0, 180deg); */
+		transform: rotate(540deg);
+	}
+
+	.sider-trigger i,
+	.sider-trigger.collapsed i {
+		transition: all 0.75s ease-in-out;
+	}
+
 	.alayhead {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
+		flex-direction: column;
+		align-items: baseline;
 		/* background: inherit !important;  */
 		height: unset !important;
 		margin-bottom: 1.5em;
+		padding-left: 0.5em;
+		padding-right: 0.5em;
+		width: auto;
+	}
+
+	.alayhead > div {
+		flex-direction: column;
 	}
 
 	.alayhead > div > * + * {
 		margin-left: 1.2em;
 	}
 </style>
+<style>
+	body[data-theme="dark"] .ant-layout > *,
+	body[data-theme="dark"] .ant-layout {
+		background: #141414 !important;
+	}
+
+	.ant-layout-sider-trigger {
+		background: inherit !important;
+	}
+
+	.ant-menu-light {
+		background: inherit !important;
+	}
+
+	.ant-layout-sider-children {
+		/* display: flex; */
+		flex-direction: column;
+	}
+</style>