Changing Layout and adding new things (input, routes etc.)

src/app/(calculators)/calculate/[section]/[id]/page.tsx

@@ -0,0 +1,12 @@
+import Input from "@/app/utils/Input";
+
+export default async function Calculator({params} : {params:Promise<{section:string, id:string}>}){
+    const calcData : {section:string, id:string} = await params;
+    return(
+        <>
+            <h1>Section:- {calcData.section}</h1>
+            <h1>Calculator ID:- {calcData.id}</h1>
+            <Input/>
+        </>
+    )
+}

src/app/(calculators)/calculators/page.tsx

@@ -1,17 +1,7 @@
 "use client"
 
-import Navbar from "@/app/utils/Navbar"
-import Sidemenu from "@/app/utils/Sidemenu";
-import { useState } from "react";
-
 export default function Calculators(){
-    const [navbar, setNavbar] = useState<boolean>(false);
     return(
-        <div className="grid grid-cols-[300px_1fr] grid-rows-[60px_1fr_40px] overflow-hidden calculators-container">
-            <Navbar navbarToggle={setNavbar}/>
-            <Sidemenu isNavOpen={navbar}/>
-            <div className="content"></div>
-            <div className="footer"></div>
-        </div>
-    );
+        <><h1>hi</h1></>
+    )
 }

src/app/(calculators)/layout.tsx

@@ -0,0 +1,9 @@
+import LayoutClient from "./layoutClient";
+
+export default function CalculatorsLayout({children} : {children:React.ReactNode}){
+    return(
+        <>
+            <LayoutClient>{children}</LayoutClient>
+        </>
+    )
+}

src/app/(calculators)/layoutClient.tsx

@@ -0,0 +1,18 @@
+"use client"
+import { useState } from "react";
+import Sidemenu from "../utils/Sidemenu";
+import Navbar from "../utils/Navbar";
+
+export default function LayoutClient({children} : {children:React.ReactNode}){
+    const [navbar, setNavbar] = useState<boolean>(false);
+    return(
+        <div className="grid grid-cols-[300px_1fr] grid-rows-[60px_1fr_40px] overflow-hidden calculators-container">
+            <Navbar navbarToggle={setNavbar}/>
+            <Sidemenu isNavOpen={navbar}/>
+            <div className="content">
+                {children}
+            </div>
+            <div className="footer"></div>
+        </div>
+    );
+}