From 7f0fe97a18339a295b3ac9e26bf3fc48490a60d8 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: Sat, 16 Mar 2024 20:32:57 -0400
Subject: [PATCH] fix(nuxt): enable style extraction for antd components

this fixes flashes of unstyled content on initial page load
---
 app.vue             | 12 +++++++-----
 layouts/default.vue |  8 ++++----
 nuxt.config.ts      |  4 +++-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app.vue b/app.vue
index 046a716..248694a 100644
--- a/app.vue
+++ b/app.vue
@@ -3,7 +3,7 @@
 
 	await getSession({ force: true });
 
-	const { data } = await useAuth();
+	const { data } = useAuth();
 
 	let darkBool = ref(data.value?.user?.profile?.nightMode || false);
 	// provide("user", ref(dop?.user || null));
@@ -29,10 +29,12 @@
 	// });
 </script>
 <template>
-	<NuxtLayout>
-		<NuxtPage />
-		<!-- <NuxtWelcome /> -->
-	</NuxtLayout>
+	<a-extract-style>
+		<NuxtLayout>
+			<NuxtPage />
+			<!-- <NuxtWelcome /> -->
+		</NuxtLayout>
+	</a-extract-style>
 	<nuxt-error-boundary>
 		<template #error="{ error, clearError }">
 			<error-bound :error="error" />
diff --git a/layouts/default.vue b/layouts/default.vue
index e79c223..10ec25f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -17,7 +17,7 @@
 	} = await useApiFetch<{ stories: number; authors: number }>("/totals");
 
 	const collapsed = ref<boolean>(true);
-	const nav = ref<boolean>(false);
+	const nav = ref<boolean>(true);
 
 	collapsed.value = true;
 
@@ -61,13 +61,13 @@
 					</div>
 					<navbar v-if="!!bp['md']" :inline="false" />
 				</div>
-				<a-button class="mobileTrigger" type="primary" @click="() => (nav = !nav)" v-if="!bp['md']">
+				<a-button class="mobileTrigger" type="primary" @click="() => (collapsed = !collapsed)" 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']">
+			<a-layout class="mlayout" has-sider style="padding-top: 1em">
+				<a-layout-sider :trigger="null" :collapsed="true" :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">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6ae74ce..fd3273d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -51,6 +51,9 @@ export default defineNuxtConfig({
 	// i18n: {
 	// 	vueI18n: `./i18n.config.ts`,
 	// },
+	antd: {
+		extractStyle: true,
+	},
 	speedkit: {
 		disableNuxtFontaine: true,
 		lazyOffset: {
@@ -176,7 +179,6 @@ export default defineNuxtConfig({
 	},
 	imports: {
 		autoImport: true,
-
 		dirsScanOptions: {
 			types: true,
 		},