Mobile responsiveness

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 (
+    <div
+      className="absolute inset-0 z-50 overflow-auto lg:hidden bg-black/20 backdrop-blur-sm"
+      onClick={handleClose}
+    >
+      <div
+        className={`w-64 overflow-hidden h-full transition-all duration-300 bg-white border-r`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-4 border-b">
+          <h1 className="text-xl font-bold">{data.title}</h1>
+        </div>
+        <nav className="p-4">
+          <ul className="space-y-2">
+            {data.data.map((section, index) => (
+              <li key={index}>
+                <button
+                  className={`flex items-center w-full p-3 rounded-lg transition-colors duration-200 ${
+                    currentSectionIndex === index
+                      ? "bg-blue-50 text-blue-600"
+                      : "text-gray-600 hover:bg-gray-50"
+                  }`}
+                  onClick={() => {
+                    changeSection(index);
+                    handleClose();
+                  }}
+                >
+                  <span className="mr-3">{section.icon}</span>
+                  <span className="text-left me-2">{section.title}</span>
+                  {currentSectionIndex === index && (
+                    <ChevronRight className="w-4 h-4 shrink-0 ml-auto" />
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </div>
+  );
+}

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 (
-    <div className="flex h-dvh">
-      <MobileNotAvailable />
+    <div className="flex relative overflow-hidden h-dvh">
       {/* Sidebar */}
-      <div
-        className={`${isSidebarOpen ? "w-64" : "w-0 overflow-hidden"} transition-all duration-300 bg-white border-r`}
-      >
-        <div className="p-4 border-b">
-          <h1 className="text-xl font-bold">{data.title}</h1>
-        </div>
-        <nav className="p-4">
-          <ul className="space-y-2">
-            {sections.map((section, index) => (
-              <li key={index}>
-                <button
-                  className={`flex items-center w-full p-3 rounded-lg transition-colors duration-200 ${
-                    selectedSection === index
-                      ? "bg-blue-50 text-blue-600"
-                      : "text-gray-600 hover:bg-gray-50"
-                  }`}
-                  onClick={() => setSelectedSection(index)}
-                >
-                  <span className="mr-3">{section.icon}</span>
-                  <span className="text-left me-2">{section.title}</span>
-                  {selectedSection === index && (
-                    <ChevronRight className="w-4 h-4 shrink-0 ml-auto" />
-                  )}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </div>
+      <CourseIdSidebar
+        data={data}
+        sideOpen={isSidebarOpen}
+        currentSectionIndex={selectedSection}
+        changeSection={(index) => setSelectedSection(index)}
+      />
+      <CourseIdMobileSideBar
+        data={data}
+        sideOpen={isSidebarOpen}
+        currentSectionIndex={selectedSection}
+        changeSection={(index) => setSelectedSection(index)}
+        handleClose={() => setSidebarOpen(false)}
+      />
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col overflow-hidden">
@@ -68,7 +62,10 @@ export default function CourseIdPage({
               className="p-2 rounded-lg hover:bg-gray-100 mr-4"
             >
               <ChevronRight
-                className={`w-5 h-5 transition-transform duration-200 ${isSidebarOpen ? "rotate-180" : ""}`}
+                className={`w-5 h-5 max-lg:hidden transition-transform duration-200 ${isSidebarOpen ? "rotate-180" : ""}`}
+              />
+              <Menu
+                className={`size-5 lg:hidden transition-transform duration-200 ${isSidebarOpen ? "rotate-180" : ""}`}
               />
             </button>
             <h2 className="text-xl font-semibold">
@@ -77,12 +74,10 @@ export default function CourseIdPage({
           </div>
         </header>
 
-        <main className="flex-1 overflow-auto p-4">
-          <div>
-            <div className="bg-white shadow-sm rounded-lg p-6">
-              <div className="min-h-[200px]">
-                {sections[selectedSection].component}
-              </div>
+        <main className="flex-1 overflow-auto lg:px-4 py-4">
+          <div className="bg-white lg:shadow-sm rounded-lg lg:p-6">
+            <div className="min-h-[200px]">
+              {sections[selectedSection].component}
             </div>
           </div>
         </main>

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 (
+    <div
+      className={`${sideOpen ? "w-64" : "w-0 overflow-hidden"} max-lg:hidden transition-all duration-300 bg-white border-r`}
+    >
+      <div className="p-4 border-b">
+        <h1 className="text-xl font-bold">{data.title}</h1>
+      </div>
+      <nav className="p-4">
+        <ul className="space-y-2">
+          {data.data.map((section, index) => (
+            <li key={index}>
+              <button
+                className={`flex items-center w-full p-3 rounded-lg transition-colors duration-200 ${
+                  currentSectionIndex === index
+                    ? "bg-blue-50 text-blue-600"
+                    : "text-gray-600 hover:bg-gray-50"
+                }`}
+                onClick={() => changeSection(index)}
+              >
+                <span className="mr-3">{section.icon}</span>
+                <span className="text-left me-2">{section.title}</span>
+                {currentSectionIndex === index && (
+                  <ChevronRight className="w-4 h-4 shrink-0 ml-auto" />
+                )}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export default CourseIdSidebar;

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 (

packages/nextjs/components/Menu.tsx

@@ -10,7 +10,7 @@ export default function Menu({ onClose }: { onClose: () => void }) {
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm"
+      className="fixed inset-0 z-[90] bg-black/20 backdrop-blur-sm"
       aria-label="Menu"
       role="dialog"
       onClick={onClose}

packages/nextjs/components/Navbar.tsx

@@ -19,7 +19,7 @@ export default function Navbar() {
         <div className="container mx-auto px-4">
           <div className="flex h-16 items-center justify-between">
             <Link href="/" className="text-2xl font-bold text-blue-600">
-              DefiVerse
+              DeFiVerse
             </Link>
 
             <nav className="mx-6 hidden items-center space-x-4 md:flex lg:space-x-6">
@@ -37,8 +37,8 @@ export default function Navbar() {
               ))}
             </nav>
 
-            <div className="flex items-center space-x-4">
-              <div className="hidden sm:block">
+            <div className="flex items-center gap-4">
+              <div className="hidden sm:flex items-center gap-3">
                 <RainbowKitCustomConnectButton />
               </div>
               <button

packages/nextjs/utils/scaffold-eth/getMetadata.ts

@@ -44,7 +44,13 @@ export const getMetadata = ({
       images: [imageUrl],
     },
     icons: {
-      icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
+      icon: [
+        {
+          url: imageRelativePath || "/favicon.png",
+          sizes: "32x32",
+          type: "image/png",
+        },
+      ],
     },
   };
 };