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">
+        <><h1>hi</h1></>
-            <Navbar navbarToggle={setNavbar}/>
+    )
-            <Sidemenu isNavOpen={navbar}/>
-            <div className="content"></div>
-            <div className="footer"></div>
-        </div>
-    );
 }

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>
+    );
+}

src/app/globals.css

@@ -21,6 +21,7 @@
 .content{
   grid-area: content;
   background: #F9FAFB;  /* soft white */
+  color: black;
 }
 .footer{
   grid-area: footer;

src/app/page.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+"use client"
 
 export default function Home(){
     return(

src/app/utils/Input.tsx

@@ -0,0 +1,11 @@
+export default function Input(){
+    return(
+        <>
+            <fieldset className="fieldset">
+                <legend className="fieldset-legend text-black">Page title</legend>
+                <input type="text" className="input bg-white" placeholder="My awesome page" />
+                <p className="label">You can edit page title later on from settings</p>
+            </fieldset>
+        </>
+    );
+}

src/app/utils/Navbar.tsx

@@ -31,12 +31,38 @@ export default function Navbar({navbarToggle}: Props){
                 <button className="btn btn-ghost btn-circle">
                     <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>
                 </button>
-                <button className="btn btn-ghost btn-circle">
+                <button>
-                <div className="indicator">
+                    
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
-                    <span className="badge badge-xs badge-primary indicator-item"></span>
-                </div>
                 </button>
+                <label className="flex cursor-pointer gap-2 mt-0.5">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round">
+                        <circle cx="12" cy="12" r="5" />
+                        <path
+                        d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+                    </svg>
+                    <input type="checkbox" value="synthwave" className="toggle theme-controller" />
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                    </svg>
+                </label>
             </div>
             </div>
     );

src/app/utils/Section.tsx

@@ -0,0 +1,18 @@
+import { Calculator } from "./calculators/types";
+
+export default function Section({sectionName, Calculators, id} : {sectionName:string, Calculators:Calculator[], id:string}){
+    return(
+        <li>
+            <details>
+            <summary>{sectionName}</summary>
+            <ul>
+                {Calculators.map((e) => {
+                    return(
+                        <li><a key={e.id} href={`/calculate/${id}/${e.id}`}>{e.name}</a></li>
+                    )
+                })}
+            </ul>
+            </details>
+        </li>
+    )
+}

src/app/utils/Sidemenu.tsx

@@ -1,10 +1,13 @@
 "use client"
 
+import { CalculatorRegistry } from "./calculators/registry";
+import Section from "./Section";
 type Props = {
     isNavOpen: boolean;
 }
 
 export default function Sidemenu({isNavOpen}: Props){
+    const sectionNames = Object.keys(CalculatorRegistry);
     return(
     <div className="flex flex-col items-center sidebar pointer-events-auto">
         <ul className={`menu bg-base-200 rounded-box
@@ -15,15 +18,11 @@ export default function Sidemenu({isNavOpen}: Props){
     transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isNavOpen 
       ? "translate-x-0 opacity-100 visible" 
       : "-translate-x-[110%] opacity-0 invisible pointer-events-none"}`} id="calclist">
-            <li>
+            {
-                <details open>
+                sectionNames.map((e) => {
-                <summary>Parent</summary>
+                    return <Section key={e} id={e} sectionName={CalculatorRegistry[e].displayName} Calculators={CalculatorRegistry[e].calculators}/>
-                <ul>
+                })
-                    <li><a>Submenu 1</a></li>
+            }
-                    <li><a>Submenu 2</a></li>
-                </ul>
-                </details>
-            </li>
         </ul>
     </div>
     );