diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index e0f4194..aab4e77 100644
--- 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 (
@@ -31,15 +32,13 @@ export const Footer = () => {
-
-
- Fork me
-
+
·
@@ -56,16 +55,6 @@ export const Footer = () => {
·
-
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index a30c33c..9405a90 100644
--- 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 (
+ -
+
+ {icon}
+ {label}
+
+
+ );
+ })}
+ >
+ );
+};
+
/**
* Site header
*/
export const Header = () => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const burgerMenuRef = useRef(null);
+
useOutsideClick(
burgerMenuRef,
useCallback(() => setIsDrawerOpen(false), []),
);
return (
-
+
@@ -51,11 +90,13 @@ export const Header = () => {
Private Key Dice
+
-
);