Refactor layout component

upleveled · Dec 27, 2023 · 2498403 · 2498403
1 parent 87cf3a1
commit 2498403
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 32 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,6 @@
-'use client';
-
 import '../components/globals.css';
-import { ThemeProvider } from 'next-themes';
 import { Manrope, Young_Serif } from 'next/font/google';
-import { useState } from 'react';
-import { Footer, MobileNav, Nav } from '../components';
-import { MenuProvider } from '../components/MenuContext';
-import { cn } from '../utils/cn';
+import LayoutComponent from '../components/layoutComponent';
 
 const manrope = Manrope({
   display: 'swap',
@@ -26,33 +20,9 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const toggleMenuOpen = () => {
-    if (menuOpen) {
-      setMenuOpen(false);
-    } else {
-      setMenuOpen(true);
-    }
-  };
-
   return (
     <html lang="en" className={`${manrope.variable} ${youngSerif.variable}`}>
-      <body
-        className={cn(
-          'bg-background text-accent-1 font-body transition-colors',
-          menuOpen && 'h-full w-full overflow-hidden',
-        )}
-      >
-        <ThemeProvider>
-          <MenuProvider value={{ toggleMenuOpen, menuOpen }}>
-            <Nav />
-            <MobileNav />
-            <main className="main bg-background">{children}</main>
-            <Footer />
-          </MenuProvider>
-        </ThemeProvider>
-      </body>
+      <LayoutComponent>{children}</LayoutComponent>
     </html>
   );
 }
diff --git a/components/layoutComponent.tsx b/components/layoutComponent.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import '../components/globals.css';
+import { ThemeProvider } from 'next-themes';
+import { useState } from 'react';
+import { Footer, MobileNav, Nav } from '../components';
+import { MenuProvider } from '../components/MenuContext';
+import { cn } from '../utils/cn';
+
+export default function LayoutComponent({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const toggleMenuOpen = () => {
+    if (menuOpen) {
+      setMenuOpen(false);
+    } else {
+      setMenuOpen(true);
+    }
+  };
+
+  return (
+    <body
+      className={cn(
+        'bg-background text-accent-1 font-body transition-colors',
+        menuOpen && 'h-full w-full overflow-hidden',
+      )}
+    >
+      <ThemeProvider>
+        <MenuProvider value={{ toggleMenuOpen, menuOpen }}>
+          <Nav />
+          <MobileNav />
+          <main className="main bg-background">{children}</main>
+          <Footer />
+        </MenuProvider>
+      </ThemeProvider>
+    </body>
+  );
+}