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,8 +49,7 @@
 			<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">
 				<div style="display: flex; align-items: center; flex-wrap: wrap">
 					<div class="siteTitle">Rockfic</div>
@@ -57,16 +59,20 @@
 							<a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
 						</div>
 					</div>
-						<navbar />
+					<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%">
-					<cfooter />
-				</a-layout-footer>
-			</a-layout>
 				<a-layout-sider
 					:zero-width-trigger-style="{
 						background: '#e92662',
@@ -102,6 +108,10 @@
 					</template>
 				</a-layout-sider>
 			</a-layout>
+			<a-layout-footer style="bottom: 100%">
+				<cfooter />
+			</a-layout-footer>
+		</a-layout>
 		<!-- <div class="mlayout">
 		<a-skeleton/>
 		<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;
 	}