refactor(components): improve sidebar/mobile ux

make it so the trigger isn't just an out-of-place floating button
encapsulate breakpoint-dependent values in `computed`

components/layouts/navbar.vue

@@ -89,6 +89,7 @@
 		display: flex;
 		flex-grow: 0.01;
 		margin-left: auto;
+		padding-right: 1em;
 	}
 
 	.acbut > * + * {

layouts/default.vue

@@ -6,7 +6,8 @@
 	import icon from "~/components/icon.vue";
 
 	const bp = Grid.useBreakpoint();
-
+	const isMed = computed(() => !!bp.value["md"]);
+	const notMed = computed(() => !isMed.value);
 	const { useToken } = theme;
 	const { token } = useToken();
 
@@ -15,11 +16,8 @@
 	const {
 		data: { value: totals },
 	} = await useApiFetch<{ stories: number; authors: number }>("/totals");
-
+	const leftCollapsed = ref<boolean>(true);
 	const collapsed = ref<boolean>(true);
-	const nav = ref<boolean>(true);
-
-	collapsed.value = true;
 
 	const sideTriggerVal = computed(() => {
 		let th = collapsed.value ? " collapsed" : "";
@@ -30,7 +28,6 @@
 	// provide("sidebar-items", rd.data)
 
 	provide("collapsed", collapsed);
-	let darko = inject("dark");
 </script>
 <template>
 	<a-config-provider
@@ -60,10 +57,10 @@
 								<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" />
+						<navbar v-if="isMed" :inline="false" />
 					</div>
-					<a-button class="mobileTrigger" type="primary" @click="() => (nav = !nav)" v-if="!bp['md']">
-						<menu-unfold-outlined v-if="nav" />
+					<a-button class="mobileTrigger" type="primary" @click="() => (leftCollapsed = !leftCollapsed)" v-if="notMed">
+						<menu-unfold-outlined v-if="leftCollapsed" />
 						<menu-fold-outlined v-else />
 					</a-button>
 				</a-layout-header>
@@ -73,41 +70,52 @@
 						:theme="darkBool ? 'dark' : 'light'"
 						:collapsed-width="0"
 						:collapsible="true"
-						v-model:collapsed="collapsed"
-						v-if="!bp['md']"
+						v-model:collapsed="leftCollapsed"
+						v-if="notMed"
+						:style="{
+							left: 0,
+							position: 'absolute',
+							height: '100% !important',
+							'z-index': 100,
+							borderRight: '1.5px solid #ccc',
+						}"
 					>
 						<navbar inline />
 					</a-layout-sider>
-					<a-layout-content style="flex-grow: 1">
+					<a-layout-content
+						:style="{
+							flexGrow: 1,
+							paddingRight: isMed ? '3em' : '1em',
+						}"
+					>
 						<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': 9,
 						}"
-						:theme="darko ? 'dark' : 'light'"
-						:breakpoint="'lg'"
+						:theme="darkBool ? 'dark' : 'light'"
 						v-model:collapsed="collapsed"
 						:collapsible="true"
-						:collapsed-width="0"
+						:collapsed-width="60"
 						:style="{
 							color: col,
 							right: '-3px',
 							alignSelf: 'stretch',
-							borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
+							borderLeft: `2px solid ${darkBool ? '#fff' : '#ccc'}`,
+							position: 'sticky',
+							height: '100vh',
+							top: 0,
 						}"
 					>
 						<sidebar-thing />
 						<template #trigger>
-							<div class="outerst" @click="() => (collapsed = !collapsed)">
+							<div class="outerst">
 								<div :class="sideTriggerVal">
 									<icon istyle="solid" name="chevron-right" :size="30" />
 								</div>
@@ -171,6 +179,10 @@
 		width: 100%;
 	}
 
+	.mlayout {
+		position: relative;
+	}
+
 	.mlayout,
 	footer {
 		padding: 1.5em;
@@ -182,10 +194,12 @@
 
 		.mlayout {
 			padding: 3em;
+			padding-right: 0em !important;
 		}
 
 		.mlayout > footer {
 			padding: 0;
+			margin-left: 0;
 			/* padding-right: calc(4em + 90px); */
 		}
 
@@ -291,6 +305,13 @@
 	.ant-menu-light {
 		background: inherit !important;
 	}
+	.mlayout .ant-layout-sider:first-child .ant-layout-sider-children {
+		height: inherit;
+	}
+	.mlayout .ant-layout-sider:first-child .ant-layout-sider-children .some-wrapper {
+		position: sticky;
+		top: 0;
+	}
 
 	.ant-layout-sider-children {
 		/* display: flex; */