diff --git a/src/app/(calculators)/calculators/page.tsx b/src/app/(calculators)/calculators/page.tsx
index 7b28516..ac6a261 100644
--- a/src/app/(calculators)/calculators/page.tsx
+++ b/src/app/(calculators)/calculators/page.tsx
@@ -26,15 +26,13 @@ export default function Calculators(){
{pastUsedObj.length !== 0 ?
-
Past Results:
+
Past Results: ({pastUsedObj.length})
-
- Empty
@@ -52,17 +50,17 @@ export default function Calculators(){
-
: No past results were found
}
+ : null}
-
Bookmarks:
+
Bookmarks: ({bookmarks?.length})
{bookmarks?.length !== 0 ? bookmarks?.map(e => {
console.log(e.id);
const calc = CalculatorRegistry[e.section].calculators.find(c => c.id === e.id)
return
- }) : empty
}
+ }) : Add bookmarks to get started!
}
diff --git a/src/app/(calculators)/layoutClient.tsx b/src/app/(calculators)/layoutClient.tsx
index 3488f79..beda67c 100644
--- a/src/app/(calculators)/layoutClient.tsx
+++ b/src/app/(calculators)/layoutClient.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
import Sidemenu from "../utils/Sidemenu";
import Navbar from "../utils/Navbar";
import { Roboto } from "next/font/google";
+import Footer from "../utils/Footer";
const font = Roboto({});
export default function LayoutClient({children} : {children:React.ReactNode}){
const [navbar, setNavbar] = useState(false);
@@ -11,11 +12,11 @@ export default function LayoutClient({children} : {children:React.ReactNode}){
);
}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index e92c70a..5ea88bc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,14 +2,33 @@
@plugin "daisyui";
.calculators-container{
display: grid;
- grid-template-areas:"navbar navbar" "sidebar content" "footer footer";
+ grid-template-areas:
+ "navbar"
+ "content"
+ "footer";
height: 100vh;
+ width: 100%;
+ grid-template-columns: 1fr;
+ grid-template-rows: 60px 1fr 40px;
+ overflow-x: hidden;
+}
+@media (min-width: 768px) {
+ .calculators-container {
+ grid-template-areas:
+ "navbar navbar"
+ "sidebar content"
+ "footer footer";
+
+ grid-template-columns: 300px 1fr;
+ }
}
.navbar{
grid-area: navbar;
- background: #ed1b24;
+ background: #ed1b24;
color: #FFFFFF;
- position:sticky;
+ position: sticky;
+ top: 0;
+ z-index: 50;
}
#logo{
transform: translateY(1px);
@@ -24,9 +43,10 @@
background: #F9FAFB; /* soft white */
color: black;
}
-.footer{
+.footer-area{
grid-area: footer;
- background: #cccccc;
+ background: #ed1b24;
+
}
.website-name {
font-size: 18px;
diff --git a/src/app/utils/Footer.tsx b/src/app/utils/Footer.tsx
new file mode 100644
index 0000000..64613c5
--- /dev/null
+++ b/src/app/utils/Footer.tsx
@@ -0,0 +1,59 @@
+import LogoSVG from "./LogoSVG"
+
+export default function Footer(){
+ return(
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/utils/LogoSVG.tsx b/src/app/utils/LogoSVG.tsx
new file mode 100644
index 0000000..10e2a49
--- /dev/null
+++ b/src/app/utils/LogoSVG.tsx
@@ -0,0 +1,245 @@
+export default function LogoSVG(){
+ return(
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/utils/Navbar.tsx b/src/app/utils/Navbar.tsx
index 8bc18ad..0cc4cd4 100644
--- a/src/app/utils/Navbar.tsx
+++ b/src/app/utils/Navbar.tsx
@@ -1,71 +1,35 @@
-"use client"
-import Link from "next/link";
-type Props = {
- navbarToggle: React.Dispatch>;
-};
+ "use client"
+ import Link from "next/link";
+ type Props = {
+ navbarToggle: React.Dispatch>;
+ };
-export default function Navbar({navbarToggle}: Props){
- return(
-
-
-
-