fix: implement TopProgressBar as Client

app/layout.jsx

@@ -1,4 +1,3 @@
-import dynamic from "next/dynamic";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
 import { config } from "@fortawesome/fontawesome-svg-core";
@@ -6,14 +5,19 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
 config.autoAddCss = false;
 import "./nprogress.css";
 import { Analytics } from "@vercel/analytics/react";
+import Chat from "@/components/Chat";
+import ClientTopProgressBar from "@/components/ClientTopProgressBar";
 
 export const metadata = {
     title: "Alvalens | Portofolio",
+
     description:
 		"My name is Alvalens, I'm a web developer and I'm passionate about it. I'm currently studying at Universitas Negeri Malang.",
+
     author: "Alvalen Shafelbilyunazra",
     siteUrl: "https://www.alvalens.my.id",
     applicationName: "Alvalens",
+
     keywords: [
 		"alvalens",
 		"alvalen",
@@ -25,6 +29,7 @@ export const metadata = {
 		"alvalen porto",
 		"alvalen um",
 	],
+
     openGraph: {
 		type: "website",
 		url: "https://www.alvalens.my.id",
@@ -40,23 +45,14 @@ export const metadata = {
 			},
 		],
 		site_name: "Alvalens | Portofolio",
-	},
+	}
 };
 
-
-import Chat from "@/components/Chat";
-
-const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
-	ssr: false,
-});
-
-
-
 export default function RootLayout({ children }) {
 	return (
 		<html lang="en">
 			<body>
-				<TopProgressBar />
+				<ClientTopProgressBar />
 				<Navbar />
 				{children}
 				<Chat />

components/ClientTopProgressBar.jsx

@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
+	ssr: false,
+});
+
+export default function ClientTopProgressBar() {
+	return <TopProgressBar />;
+}