Testing things on header and footer, may break mobile screen

luloxi · Sep 25, 2024 · b0bb27c · b0bb27c
1 parent dc77dfa
commit b0bb27c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 38 deletions.
diff --git a/packages/nextjs/app/not-found/NotFound.tsx b/packages/nextjs/app/not-found/NotFound.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { NextPage } from "next";
+
+export const NotFound: NextPage = () => {
+  return (
+    <div className="flex flex-col justify-center items-center p-2">
+      {/* Not Found Section */}
+      <div className="relative text-red-500 flex flex-col justify-center items-center bg-base-100 p-6 rounded-lg shadow-md w-full">
+        <p className="font-bold text-2xl">Page under development</p>
+        <p>Oops, sorry! No content here yet!</p>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/not-found/page.tsx b/packages/nextjs/app/not-found/page.tsx
@@ -0,0 +1,18 @@
+import { NotFound } from "./NotFound";
+import type { NextPage } from "next";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "My Profile",
+  description: "Built with 🏗 Scaffold-ETH 2",
+});
+
+const ProfilePage: NextPage = () => {
+  return (
+    <>
+      <NotFound />
+    </>
+  );
+};
+
+export default ProfilePage;
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -51,10 +51,10 @@ export const Footer = () => {
           />
         </Link>
 
-        <Link href="/search" passHref>
+        <Link href="/not-found" passHref>
           <FontAwesomeIcon
             icon={faSearch}
-            className={`h-6 w-6 text-gray-500 ${pathname === "/profile" ? "text-blue-600" : "hover:text-blue-600"}`}
+            className={`h-6 w-6 text-red-500 ${pathname === "/profile" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
         <Link href="/create" passHref>
@@ -63,16 +63,16 @@ export const Footer = () => {
             className={`h-6 w-6 ${pathname === "/create" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
-        <Link href="/notifications" passHref>
+        <Link href="/not-found" passHref>
           <FontAwesomeIcon
             icon={faBell}
-            className={`h-6 w-6 text-gray-500 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
+            className={`h-6 w-6 text-red-500 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
-        <Link href="/messages" passHref>
+        <Link href="/not-found" passHref>
           <FontAwesomeIcon
             icon={faEnvelope}
-            className={`h-6 w-6 text-gray-500 ${pathname === "/settings" ? "text-blue-600" : "hover:text-blue-600"}`}
+            className={`h-6 w-6 text-red-500 ${pathname === "/settings" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
       </footer>

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -126,34 +126,36 @@ export const Header = () => {
 
   return (
     <div className="flex lg:sticky top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
-      <div className="navbar-start ">
-        <div className="flex lg:hidden ml-4 items-center justify-center">
+      <div className="navbar-start ml-2">
+        <div className="flex lg:hidden ml-2 items-center justify-center">
           <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
         </div>
-        <Link href="/" passHref>
-          <button
-            className={`btn btn-primary bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-2xl ${
-              pathname === "/" ? "text-blue-600" : ""
-            }`}
-          >
-            <div className="flex flex-row items-center justify-center gap-2">
-              <FontAwesomeIcon icon={faHome} className="h-6 w-6" />
-              <span>Home</span>
-            </div>
-          </button>
-        </Link>
-        <Link href="/create" passHref>
-          <button
-            className={`btn btn-primary bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-2xl ${
-              pathname === "/create" ? "text-blue-600" : ""
-            }`}
-          >
-            <div className="flex flex-row items-center justify-center gap-2">
-              <FontAwesomeIcon icon={faPlus} className="h-6 w-6" />
-              <span>Create</span>
-            </div>
-          </button>
-        </Link>
+        <div className="flex flex-row gap-3">
+          <Link href="/" passHref>
+            <button
+              className={`bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-2xl ${
+                pathname === "/" ? "text-blue-600" : ""
+              }`}
+            >
+              <div className="flex flex-row items-center justify-center gap-2">
+                <FontAwesomeIcon icon={faHome} className="h-6 w-6" />
+                <span>Home</span>
+              </div>
+            </button>
+          </Link>
+          <Link href="/create" passHref>
+            <button
+              className={` bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-2xl ${
+                pathname === "/create" ? "text-blue-600" : ""
+              }`}
+            >
+              <div className="flex flex-row items-center justify-center gap-2">
+                <FontAwesomeIcon icon={faPlus} className="h-6 w-6" />
+                <span>Create</span>
+              </div>
+            </button>
+          </Link>
+        </div>
       </div>
 
       <div className="navbar-center flex-1 flex justify-center items-center">
@@ -163,13 +165,12 @@ export const Header = () => {
       </div>
 
       <div className="navbar-end mr-4 relative" ref={menuRef}>
-        <div className="">
+        <div className="flex flex-row items-center justify-center">
+          <SwitchTheme
+            className={`mr-4 hidden lg:flex pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`}
+          />
           {isConnected ? (
             <>
-              <div className="hidden lg:flex items-center justify-center">
-                {/* <SwitchTheme className={`mr-4 pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} /> */}
-              </div>
-
               <div
                 className="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center cursor-pointer"
                 onClick={() => setIsMenuOpen(!isMenuOpen)}
@@ -182,7 +183,7 @@ export const Header = () => {
             </>
           ) : (
             <>
-              <SwitchTheme className={`mr-4 pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
+              {/* <SwitchTheme className={`mr-4 pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} /> */}
               <RainbowKitCustomConnectButton />
             </>
           )}