From 49200579da5d5e77942cd7efa5dc1f8507f8853b Mon Sep 17 00:00:00 2001 From: Lukman-01 Date: Mon, 3 Feb 2025 20:49:34 +0100 Subject: [PATCH 1/3] sidebar responsiveness --- .../components/CourseIdMobileSidebar.tsx | 69 +++++++++++++++++++ .../courses/components/CourseIdSidebar.tsx | 58 ++++++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 packages/nextjs/app/courses/components/CourseIdMobileSidebar.tsx create mode 100644 packages/nextjs/app/courses/components/CourseIdSidebar.tsx diff --git a/packages/nextjs/app/courses/components/CourseIdMobileSidebar.tsx b/packages/nextjs/app/courses/components/CourseIdMobileSidebar.tsx new file mode 100644 index 0000000..82be307 --- /dev/null +++ b/packages/nextjs/app/courses/components/CourseIdMobileSidebar.tsx @@ -0,0 +1,69 @@ +import { ChevronRight } from "lucide-react"; +import { useEffect } from "react"; + +export default function CourseIdMobileSideBar({ + sideOpen, + data, + changeSection, + currentSectionIndex, + handleClose, +}: { + sideOpen: boolean; + changeSection: (index: number) => void; + handleClose: () => void; + currentSectionIndex: number; + data: { + id: number; + title: string; + description: string; + category: string; + image: string; + data: { + title: string; + icon: JSX.Element; + component: JSX.Element; + }[]; + }; +}) { + if (!sideOpen) return null; + return ( +
+
e.stopPropagation()} + > +
+

{data.title}

+
+ +
+
+ ); +} diff --git a/packages/nextjs/app/courses/components/CourseIdSidebar.tsx b/packages/nextjs/app/courses/components/CourseIdSidebar.tsx new file mode 100644 index 0000000..b1f6966 --- /dev/null +++ b/packages/nextjs/app/courses/components/CourseIdSidebar.tsx @@ -0,0 +1,58 @@ +import { ChevronRight } from "lucide-react"; + +const CourseIdSidebar = ({ + sideOpen, + data, + changeSection, + currentSectionIndex, +}: { + sideOpen: boolean; + changeSection: (index: number) => void; + currentSectionIndex: number; + data: { + id: number; + title: string; + description: string; + category: string; + image: string; + data: { + title: string; + icon: JSX.Element; + component: JSX.Element; + }[]; + }; +}) => { + return ( +
+
+

{data.title}

+
+ +
+ ); +}; + +export default CourseIdSidebar; From d41e718a8744be2654b39e9f941dd293358f4119 Mon Sep 17 00:00:00 2001 From: Lukman-01 Date: Mon, 3 Feb 2025 20:51:13 +0100 Subject: [PATCH 2/3] logo --- packages/nextjs/public/d-logo.svg | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 packages/nextjs/public/d-logo.svg diff --git a/packages/nextjs/public/d-logo.svg b/packages/nextjs/public/d-logo.svg new file mode 100644 index 0000000..9dbf895 --- /dev/null +++ b/packages/nextjs/public/d-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file From 9f98ab6542801aa8ce03d3e207532495fdc531e3 Mon Sep 17 00:00:00 2001 From: Lukman-01 Date: Mon, 3 Feb 2025 20:51:22 +0100 Subject: [PATCH 3/3] updated --- .../app/courses/components/CourseIdPage.tsx | 77 +++++++++---------- .../courses/components/MobileNotAvailable.tsx | 41 ---------- packages/nextjs/app/layout.tsx | 6 +- packages/nextjs/components/Menu.tsx | 2 +- packages/nextjs/components/Navbar.tsx | 6 +- .../nextjs/utils/scaffold-eth/getMetadata.ts | 8 +- 6 files changed, 52 insertions(+), 88 deletions(-) delete mode 100644 packages/nextjs/app/courses/components/MobileNotAvailable.tsx diff --git a/packages/nextjs/app/courses/components/CourseIdPage.tsx b/packages/nextjs/app/courses/components/CourseIdPage.tsx index acdae01..66cdb3a 100644 --- a/packages/nextjs/app/courses/components/CourseIdPage.tsx +++ b/packages/nextjs/app/courses/components/CourseIdPage.tsx @@ -1,8 +1,9 @@ "use client"; -import { useState } from "react"; -import { ChevronRight } from "lucide-react"; -import MobileNotAvailable from "./MobileNotAvailable"; +import { useEffect, useState } from "react"; +import { ChevronRight, Menu } from "lucide-react"; +import CourseIdSidebar from "./CourseIdSidebar"; +import CourseIdMobileSideBar from "./CourseIdMobileSidebar"; export default function CourseIdPage({ data, @@ -25,39 +26,32 @@ export default function CourseIdPage({ const sections = data.data; + useEffect(() => { + function handleResize() { + setSidebarOpen(window.innerWidth >= 1024); + } + + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + return ( -
- +
{/* Sidebar */} -
-
-

{data.title}

-
- -
+ setSelectedSection(index)} + /> + setSelectedSection(index)} + handleClose={() => setSidebarOpen(false)} + /> {/* Main Content */}
@@ -68,7 +62,10 @@ export default function CourseIdPage({ className="p-2 rounded-lg hover:bg-gray-100 mr-4" > +

@@ -77,12 +74,10 @@ export default function CourseIdPage({

-
-
-
-
- {sections[selectedSection].component} -
+
+
+
+ {sections[selectedSection].component}
diff --git a/packages/nextjs/app/courses/components/MobileNotAvailable.tsx b/packages/nextjs/app/courses/components/MobileNotAvailable.tsx deleted file mode 100644 index 6c83b55..0000000 --- a/packages/nextjs/app/courses/components/MobileNotAvailable.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { X } from "lucide-react"; -import { useEffect, useState } from "react"; - -export default function MobileNotAvailable() { - const [open, setOpen] = useState(false); - - useEffect(() => { - function handleResize() { - setOpen(window.innerWidth < 768); - } - - handleResize(); - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); - - if (!open) return null; - - return ( -
{ - if (e.target === e.currentTarget) { - setOpen(false); - } - }} - > - -
- - Best view on desktops and tablets - -
-
- ); -} diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index dfda9d4..8b59a36 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -5,7 +5,11 @@ import { ThemeProvider } from "~~/components/ThemeProvider"; import "~~/styles/globals.css"; import { getMetadata } from "~~/utils/scaffold-eth/getMetadata"; -export const metadata = getMetadata({ title: "Scaffold-ETH 2 App", description: "Built with 🏗 Scaffold-ETH 2" }); +export const metadata = getMetadata({ + title: "DeFiVerse", + description: "Built with 🏗 Scaffold-ETH 2", + imageRelativePath: "/d-logo.svg", +}); const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => { return ( diff --git a/packages/nextjs/components/Menu.tsx b/packages/nextjs/components/Menu.tsx index 0f5eb58..0d501ea 100644 --- a/packages/nextjs/components/Menu.tsx +++ b/packages/nextjs/components/Menu.tsx @@ -10,7 +10,7 @@ export default function Menu({ onClose }: { onClose: () => void }) { return (
- DefiVerse + DeFiVerse -
-
+
+