Merge pull request #25 from Avelous/main

fixed hidden menu items and repo link in footer
BuidlGuidl · Feb 29, 2024 · c59364f · c59364f
2 parents d658d26 + 24468bb
commit c59364f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 26 deletions.
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -11,6 +11,7 @@ import { getTargetNetwork } from "~~/utils/scaffold-eth";
  */
 export const Footer = () => {
   const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
+  const codeLink = "https://github.com/BuidlGuidl/private-key-dices";
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
@@ -31,15 +32,13 @@ export const Footer = () => {
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
-            <div className="text-center">
-              <a
-                href="https://github.com/scaffold-eth/se-2"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                Fork me
-              </a>
+            <div>
+              <div className="flex justify-center items-center gap-2 text-sm w-full">
+                📝{" "}
+                <a href={codeLink} target="_blank" rel="noreferrer" className="underline underline-offset-2">
+                  Code/Repo
+                </a>{" "}
+              </div>
             </div>
             <span>·</span>
             <div>
@@ -56,16 +55,6 @@ export const Footer = () => {
               </p>
             </div>
             <span>·</span>
-            <div className="text-center">
-              <a
-                href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                Support
-              </a>
-            </div>
           </div>
         </ul>
       </div>

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -1,27 +1,64 @@
 import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import Wallet from "./Wallet";
+import { useRouter } from "next/router";
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
+interface HeaderMenuLink {
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+}
+
+export const menuLinks: HeaderMenuLink[] = [
+  {
+    label: "Home",
+    href: "/",
+  },
+];
+
+export const HeaderMenuLinks = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      {menuLinks.map(({ label, href, icon }) => {
+        const isActive = router.pathname === href;
+        return (
+          <li key={href}>
+            <Link
+              href={href}
+              passHref
+              className={`${
+                isActive ? "bg-secondary shadow-md" : ""
+              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+            >
+              {icon}
+              <span>{label}</span>
+            </Link>
+          </li>
+        );
+      })}
+    </>
+  );
+};
+
 /**
  * Site header
  */
 export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
+
   useOutsideClick(
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
   );
 
   return (
-    <div
-      className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2"
-      style={{ backgroundColor: "#d6fcf8" }}
-    >
+    <div className="sticky lg:static top-0 navbar bg-white min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
@@ -40,7 +77,9 @@ export const Header = () => {
               onClick={() => {
                 setIsDrawerOpen(false);
               }}
-            ></ul>
+            >
+              <HeaderMenuLinks />
+            </ul>
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
@@ -51,11 +90,13 @@ export const Header = () => {
             <span className="font-bold leading-tight">Private Key Dice</span>
           </div>
         </Link>
+        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
+          <HeaderMenuLinks />
+        </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />
         <FaucetButton />
-        <Wallet />
       </div>
     </div>
   );