Header / Footer tweaks on mobile

Author: carletex

packages/nextjs/components/Footer.tsx

@@ -12,10 +12,10 @@ export const Footer = () => {
   useInitializeNativeCurrencyPrice();
 
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
+    <div className="min-h-0 py-5 px-1 sm:mb-11 lg:mb-0">
       <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="flex flex-col sm:flex-row justify-center items-center gap-3 sm:gap-2 text-sm w-full">
             <div className="text-center">
               <a
                 href="https://github.com/buidlguidl/ctf.buidlguidl.com"
@@ -26,7 +26,7 @@ export const Footer = () => {
                 Fork me
               </a>
             </div>
-            <span>·</span>
+            <span className="hidden sm:inline">·</span>
             <div className="flex justify-center items-center gap-2">
               <p className="m-0 text-center">
                 Built with <HeartIcon className="inline-block h-4 w-4" /> at
@@ -41,7 +41,7 @@ export const Footer = () => {
                 <span className="link">BuidlGuidl</span>
               </a>
             </div>
-            <span>·</span>
+            <span className="hidden sm:inline">·</span>
             <div className="text-center">
               <Link href="/faqs" className="link">
                 FAQs

packages/nextjs/components/Header/HeaderClient.tsx

@@ -1,68 +1,54 @@
 "use client";
 
-import { ReactNode, useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { hardhat } from "viem/chains";
 import { useAccount } from "wagmi";
-import { Bars3Icon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
-import { useOutsideClick } from "~~/hooks/scaffold-eth";
 import { useFetchUserData } from "~~/hooks/useFetchUserData";
 import scaffoldConfig from "~~/scaffold.config";
 
 /**
  * Site header
  */
-export const HeaderClient = ({ menuLinks }: { menuLinks: ReactNode }) => {
+export const HeaderClient = () => {
   const currentChain = scaffoldConfig.targetNetworks[0];
 
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const burgerMenuRef = useRef<HTMLDivElement>(null);
-  useOutsideClick(
-    burgerMenuRef,
-    useCallback(() => setIsDrawerOpen(false), []),
-  );
-
   const { address: connectedAddress } = useAccount();
 
   const { userData } = useFetchUserData({ address: connectedAddress });
 
   const flagsCaptured = userData?.challenges?.items.length || 0;
 
   return (
-    <div className="py-4 px-4 flex justify-between lg:grid lg:grid-cols-3 items-center z-20 relative">
-      <div className="">
-        <div className="lg:hidden dropdown" ref={burgerMenuRef}>
-          <label
-            tabIndex={0}
-            className="btn btn-ghost px-3"
-            onClick={() => {
-              setIsDrawerOpen(prevIsOpenState => !prevIsOpenState);
-            }}
-          >
-            <Bars3Icon className="w-6 h-6" />
-          </label>
-          {isDrawerOpen && (
-            <ul
-              tabIndex={0}
-              className="menu menu-compact gap-1 dropdown-content mt-3 p-2 bg-base-100 rounded-md w-52 border border-secondary"
-              onClick={() => {
-                setIsDrawerOpen(false);
-              }}
+    <>
+      <div className="py-4 px-4 flex justify-between lg:grid lg:grid-cols-3 items-center z-20 relative">
+        <div>
+          <div className="text-white text-sm font-pressStart">
+            <Link className="flex items-center gap-4" href="/">
+              <Image alt="BuidlGuidl" className="w-8" src="/fortress-flag.svg" width={112} height={128} />
+              <span className="mt-2 hidden lg:inline">BuidlGuidl CTF</span>
+            </Link>
+          </div>
+        </div>
+        <div className="hidden lg:block text-center">
+          {connectedAddress && (
+            <Link
+              href={`/profile/${connectedAddress}`}
+              className="text-white text-sm font-pressStart link-hover hover:text-primary"
             >
-              {menuLinks}
-            </ul>
+              My Flags: {flagsCaptured}/12
+            </Link>
           )}
         </div>
-        <div className="hidden lg:block text-white text-sm font-pressStart">
-          <Link className="flex items-center gap-4" href="/">
-            <Image alt="BuidlGuidl" className="w-8" src="/fortress-flag.svg" width={112} height={128} />
-            <span className="mt-2">BuidlGuidl CTF</span>
-          </Link>
+        <div className="flex">
+          <div className="ml-auto flex">
+            <RainbowKitCustomConnectButton />
+            {(currentChain?.id as number) === hardhat.id && <FaucetButton />}
+          </div>
         </div>
       </div>
-      <div className="hidden lg:block text-center">
+      <div className="text-center lg:hidden">
         {connectedAddress && (
           <Link
             href={`/profile/${connectedAddress}`}
@@ -72,12 +58,6 @@ export const HeaderClient = ({ menuLinks }: { menuLinks: ReactNode }) => {
           </Link>
         )}
       </div>
-      <div className="flex">
-        <div className="ml-auto flex">
-          <RainbowKitCustomConnectButton />
-          {(currentChain?.id as number) === hardhat.id && <FaucetButton />}
-        </div>
-      </div>
-    </div>
+    </>
   );
 };

packages/nextjs/components/Header/HeaderMenuLinks.tsx

@@ -1,6 +1,5 @@
 import { HeaderClient } from "./HeaderClient";
-import { HeaderMenuLinks } from "./HeaderMenuLinks";
 
 export const Header = () => {
-  return <HeaderClient menuLinks={<HeaderMenuLinks />} />;
+  return <HeaderClient />;
 };

packages/nextjs/components/Header/index.tsx

@@ -51,7 +51,7 @@ export const AddressInfoDropdown = ({
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
-          <span className="ml-2 mr-1">
+          <span className="hidden md:inline-block ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />