next/layouts/default.vue

<script setup lang="ts">
	import { theme, Grid } 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";

	const bp = Grid.useBreakpoint();

	const { useToken } = theme;
	const { token } = useToken();

	const col = token.value.colorText;

	const {
		data: { value: totals },
	} = await useApiFetch<{ stories: number; authors: number }>("/totals");

	const collapsed = ref<boolean>(true);
	const nav = ref<boolean>(true);

	collapsed.value = true;

	const sideTriggerVal = computed(() => {
		let th = collapsed.value ? " collapsed" : "";
		return `sider-trigger${th}`;
	});
	const darkBool = inject<boolean>("dark");
	// const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar")
	// provide("sidebar-items", rd.data)

	provide("collapsed", collapsed);
	let darko = inject("dark");
</script>
<template>
	<a-config-provider
		:theme="{
			token: {
				colorPrimary: '#f14668',
				colorSuccess: '#2be396',
				colorWarning: '#face14',
				colorInfo: '#15c6e3',
				colorTextBase: darkBool ? '#fff' : '#101010',
			},
			algorithm: darkBool ? theme.darkAlgorithm : theme.defaultAlgorithm,
		}"
	>
		<template #renderEmpty>
			<a-typography-title> ¯\_(ツ)_/¯ </a-typography-title>
			<i> Nothing here but crickets. </i>
		</template>
		<a-layout class="ylayout">
			<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>
						<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>
		<!-- <div class="mlayout">
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		</div> -->
	</a-config-provider>
</template>

<style scoped>
	.mobileTrigger {
		position: absolute;
	}
	.stat-block {
		display: inline-block;
	}

	.ylayout {
		height: 100%;
	}

	.sideWrap {
		height: 100vh;
		right: -3rem;
		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%;
	}

	.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;
			justify-content: start !important;
			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; */
		font-weight: normal;
		color: #f14668 !important;
		font-family: "jandles";
		font-size: 5em;
		margin: 0;
		display: block;
		min-width: 100%;
		text-align: center;
		/* float: left; */
	}

	.sider-trigger {
		position: relative;
		/* display: flex; */
		/* padding-left: 4.8em;
	padding-right: 1.8em; */
	}

	.sider-trigger.collapsed {
		left: 0;
	}

	.sider-trigger.collapsed i {
		/* transform: rotate3d(0, 1, 0, 180deg); */
		position: relative;
		transform: rotate(540deg);
	}

	.sider-trigger i,
	.sider-trigger.collapsed i {
		transition: all 0.75s ease-in-out;
	}

	.alayhead {
		display: flex;
		flex-direction: column;
		align-items: baseline;

		justify-content: center;
		/* background: inherit !important;  */
		height: unset !important;
		margin-bottom: 1.5em;
		padding: 0 2em;
		padding-top: 1.4em;
		width: auto;
	}

	.alayhead > div {
		flex-direction: column;
		align-self: center;
	}

	.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>