fix: abstract options component, fix popover not showing, add questio…

…n icon,

src/app/Header/MobileMenu.tsx

@@ -1,8 +1,8 @@
-import { useWeb3Modal } from "@web3modal/react";
 import Link from "next/link";
 import { Ref, forwardRef } from "react";
 import { prettifyId } from "utils/identifier";
 import WalletSection from "./WalletSection"
+import Options from "./Options"
 
 interface MobileMenuProps {
   policy: string;
@@ -18,12 +18,11 @@ const MobileMenu = forwardRef(
     { policy, me, pathname, address, web3Loaded, isConnected }: MobileMenuProps,
     ref: Ref<HTMLDivElement>
   ) => {
-    const modal = useWeb3Modal();
 
     return (
       <div
         ref={ref}
-        className="md:hidden absolute top-16 right-0 gradient w-64 p-4 rounded shadow-lg z-5"
+        className="md:hidden absolute top-16 right-0 gradient w-64 p-4 rounded shadow-lg z-10"
       >
         <nav className="flex flex-col gap-y-4">
           <Link href="/" className="text-lg font-semibold">
@@ -62,6 +61,7 @@ const MobileMenu = forwardRef(
             }}
           />
         </div>
+        <Options />
       </div>
     );
   }

src/app/Header/Options.tsx

@@ -0,0 +1,55 @@
+import ExternalLink from "components/ExternalLink"
+import Popover from "components/Popover"
+import React from "react";
+import Image from "next/image";
+
+
+const Options: React.FC = () => {
+  return (
+    <div className="flex flex-row mt-[16px] md:mt-0">
+      <ExternalLink href="https://snapshot.org/#/poh.eth/">
+        <Image alt="snapshot" src="/logo/snapshot.svg" height={16} width={16} />
+      </ExternalLink>
+
+      <Popover
+        trigger={
+          <Image
+            alt="question"
+            className="cursor-pointer ml-2"
+            src={"/logo/question.svg"}
+            height={16}
+            width={16}
+          />
+        }
+      >
+        <div className="p-2 h-fit grid grid-cols-1 gap-2">
+          <ExternalLink href="https://t.me/proofhumanity">
+            Get Help (English)
+          </ExternalLink>
+          <ExternalLink href="https://t.me/proofofhumanityenespanol">
+            Get Help (Spanish)
+          </ExternalLink>
+          <ExternalLink href="https://gov.proofofhumanity.id/">
+            Forums
+          </ExternalLink>
+          <ExternalLink href="https://t.me/pohDebug">
+            Report Bugs (Telegram)
+          </ExternalLink>
+          <ExternalLink href="https://github.com/Proof-Of-Humanity/proof-of-humanity-web/issues">
+            Report Bugs (Github)
+          </ExternalLink>
+          <ExternalLink href="https://kleros.gitbook.io/docs/products/proof-of-humanity/proof-of-humanity-tutorial">
+            Tutorial
+          </ExternalLink>
+          <ExternalLink href="https://ethereum.org/en/wallets">
+            Crypto Beginner's Guide
+          </ExternalLink>
+          <ExternalLink href="https://kleros.gitbook.io/docs/products/proof-of-humanity/poh-faq">
+            FAQ
+          </ExternalLink>
+        </div>
+      </Popover>
+    </div>
+  );
+};
+export default Options;

src/app/Header/WalletSection.tsx

@@ -1,7 +1,5 @@
 import { useWeb3Modal } from "@web3modal/react";
-import Image from "next/image";
 import ChainLogo from "components/ChainLogo";
-import ExternalLink from "components/ExternalLink";
 import { shortenAddress } from "utils/address";
 
 interface WalletSectionProps {
@@ -45,14 +43,6 @@ const WalletSection = ({
           Connect
         </button>
       )}
-
-      <ExternalLink href="https://snapshot.org/#/poh.eth/">
-        <Image alt="snapshot" src="/logo/snapshot.svg" height={16} width={16} />
-      </ExternalLink>
-
-      <button className="w-6 h-6 ml-2 border-2 border-white rounded-full font-bold text-sm">
-        ?
-      </button>
     </div>
   );
 };

src/app/Header/index.tsx

@@ -12,6 +12,7 @@ import withClientConnected from "components/high-order/withClientConnected";
 import useWeb3Loaded from "hooks/useWeb3Loaded";
 import DesktopNavigation from "./DesktopNavigation";
 import MobileMenu from "./MobileMenu";
+import Options from "./Options";
 import WalletSection from "./WalletSection";
 
 interface IHeader extends JSX.IntrinsicAttributes {
@@ -74,8 +75,13 @@ export default withClientConnected(function Header({ policy }: IHeader) {
         />
       )}
 
-      <div className="hidden md:block">
-        <WalletSection {...{ chain, address, isConnected, web3Loaded }} />
+      <div className="flex flex-row items-center">
+        <div className="hidden md:block">
+          <WalletSection {...{ chain, address, isConnected, web3Loaded }} />
+        </div>
+        <div className="hidden md:block">
+          <Options />
+        </div>
       </div>
     </header>
   );

src/components/Popover.tsx

@@ -1,16 +1,38 @@
 import Popup from "reactjs-popup";
+import { useEffect, useState } from "react";
 
 interface PopoverInterface {
   trigger: JSX.Element;
   children: React.ReactNode;
 }
 
-const Popover: React.FC<PopoverInterface> = ({ trigger, children }) => (
-  <Popup trigger={trigger} position="bottom right" arrow={false}>
-    <div className="w-48 mt-1 bg-white rounded shadow-md shadow-shade-500/50">
-      {children}
-    </div>
-  </Popup>
-);
+const Popover: React.FC<PopoverInterface> = ({ trigger, children }) => {
+  const [position, setPosition] = useState<"bottom right" | "bottom center">("bottom right");
+
+  useEffect(() => {
+    const updatePosition = () => {
+      if (window.innerWidth < 768) {
+        setPosition("bottom center");
+      } else {
+        setPosition("bottom right");
+      }
+    };
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, []);
+
+  return (
+    <Popup trigger={trigger} position={position} arrow={false}>
+      <div className="w-48 mt-1 bg-white rounded shadow-md shadow-shade-500/50">
+        {children}
+      </div>
+    </Popup>
+  );
+};
 
 export default Popover;