refactor(components): change layout

add collapsible version of navbar to side if screen width < medium, otherwise display the full horizontal navbar at the top

components/layouts/navbar.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+	import { Grid } from "ant-design-vue";
+	const bp = Grid.useBreakpoint();
 	const { data, status } = useAuth();
 	const itemMap = ref({
 		home: "/",
@@ -15,6 +17,7 @@
 		admin: "/admin",
 		logout: "/auth/logout",
 	});
+	const propo = defineProps<{ inline: boolean }>();
 	let cur = ref<string>(Object.keys(itemMap.value).find((a) => itemMap.value[a] === useRoute().path) || useRoute().path);
 	let selected: string[] = [cur.value];
 
@@ -28,12 +31,12 @@
 </script>
 
 <template>
-	<div class="some-wrapper">
+	<div class="some-wrapper" :style="{ flexDirection: inline ? 'column' : 'row' }">
 		<a-menu
-			mode="horizontal"
+			:mode="inline ? 'inline' : 'horizontal'"
 			class="navibar"
 			:style="{
-				height: '40px',
+				height: !inline ? '40px' : '100%',
 				alignSelf: 'center',
 				justifyContent: 'stretch',
 				width: '100%',

layouts/default.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-	import { theme } from "ant-design-vue";
+	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();
 
@@ -15,6 +17,7 @@
 	} = await useApiFetch<{ stories: number; authors: number }>("/totals");
 
 	const collapsed = ref<boolean>(true);
+	const nav = ref<boolean>(false);
 
 	collapsed.value = true;
 
@@ -46,61 +49,68 @@
 			<a-typography-title> ¯\_(ツ)_/¯ </a-typography-title>
 			<i> Nothing here but crickets. </i>
 		</template>
-		<a-layout class="ylayout" has-sider>
+		<a-layout class="ylayout">
-			<a-layout class="mlayout">
+			<a-layout-header class="alayhead">
-				<a-layout-header class="alayhead">
+				<div style="display: flex; align-items: center; flex-wrap: wrap">
-					<div style="display: flex; align-items: center; flex-wrap: wrap">
+					<div class="siteTitle">Rockfic</div>
-						<div class="siteTitle">Rockfic</div>
+					<div class="stat-block">
-						<div class="stat-block">
+						<div>
-							<div>
+							<a-typography-text> Band fiction that rocks </a-typography-text>
-								<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>
-								<a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
-							</div>
 						</div>
-						<navbar />
 					</div>
-				</a-layout-header>
+					<navbar v-if="!!bp['md']" :inline="false" />
+				</div>
+				<a-button 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>
+				<a-layout-sider :trigger="null" :collapsed-width="0" :collapsible="true" v-model:collapsed="nav" v-if="!bp['md']">
+					<navbar inline />
+				</a-layout-sider>
 				<a-layout-content style="flex-grow: 1">
 					<slot />
 				</a-layout-content>
-				<a-layout-footer style="bottom: 100%">
+				<a-layout-sider
-					<cfooter />
+					:zero-width-trigger-style="{
-				</a-layout-footer>
+						background: '#e92662',
-			</a-layout>
+						padding: '1.2em',
-			<a-layout-sider
+						position: 'fixed',
-				:zero-width-trigger-style="{
+						right: 0,
-					background: '#e92662',
+						borderRadius: '15%',
-					padding: '1.2em',
+						color: 'white',
-					position: 'fixed',
+						border: '2.4px solid #fffFFF80',
-					right: 0,
+						top: '75vh',
-					borderRadius: '15%',
+						'z-index': 99999999,
-					color: 'white',
+					}"
-					border: '2.4px solid #fffFFF80',
+					:theme="darko ? 'dark' : 'light'"
-					top: '75vh',
+					:breakpoint="'lg'"
-					'z-index': 99999999,
+					v-model:collapsed="collapsed"
-				}"
+					:collapsible="true"
-				:theme="darko ? 'dark' : 'light'"
+					:collapsed-width="0"
-				:breakpoint="'lg'"
+					:style="{
-				v-model:collapsed="collapsed"
+						color: col,
-				:collapsible="true"
+						height: '100%',
-				:collapsed-width="0"
+						position: 'fixed',
-				:style="{
+						right: '0px',
-					color: col,
+						borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
-					height: '100%',
+					}"
-					position: 'fixed',
+				>
-					right: '0px',
+					<sidebar-thing />
-					borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
+					<template #trigger>
-				}"
+						<div class="outerst" @click="() => (collapsed = !collapsed)">
-			>
+							<div :class="sideTriggerVal">
-				<sidebar-thing />
+								<icon istyle="solid" name="chevron-right" :size="30" />
-				<template #trigger>
+							</div>
-					<div class="outerst" @click="() => (collapsed = !collapsed)">
-						<div :class="sideTriggerVal">
-							<icon istyle="solid" name="chevron-right" :size="30" />
 						</div>
-					</div>
+					</template>
-				</template>
+				</a-layout-sider>
-			</a-layout-sider>
+			</a-layout>
+			<a-layout-footer style="bottom: 100%">
+				<cfooter />
+			</a-layout-footer>
 		</a-layout>
 		<!-- <div class="mlayout">
 		<a-skeleton/>
@@ -243,8 +253,8 @@
 		/* background: inherit !important;  */
 		height: unset !important;
 		margin-bottom: 1.5em;
-		padding-left: 0.5em;
+		padding: 0 2em;
-		padding-right: 0.5em;
+		padding-top: 1.4em;
 		width: auto;
 	}