feat: add mobile nav bar

picsoritdidnthappen · Nov 21, 2024 · b1c2816 · b1c2816
1 parent 148a729
commit b1c2816
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 12 deletions.
diff --git a/src/app/[netname]/bounty/[id]/page.tsx b/src/app/[netname]/bounty/[id]/page.tsx
@@ -7,15 +7,23 @@ import 'react-toastify/dist/ReactToastify.css';
 import BountyClaims from '@/components/bounty/BountyClaims';
 import BountyInfo from '@/components/bounty/BountyInfo';
 import CreateClaim from '@/components/ui/CreateClaim';
+import NavBarMobile from '@/components/global/NavBarMobile';
+import { useScreenSize } from '@/hooks/useScreenSize';
 
 export default function Bounty({ params }: { params: { id: string } }) {
+  const isMobile = useScreenSize();
+
   return (
     <>
       <div className='px-5 lg:px-20'>
         <BountyInfo bountyId={params.id} />
         <BountyClaims bountyId={params.id} />
       </div>
-      <CreateClaim bountyId={params.id} />
+      {isMobile ? (
+        <NavBarMobile type='claim' bountyId={params.id} />
+      ) : (
+        <CreateClaim bountyId={params.id} />
+      )}
       <ToastContainer />
       <div className='h-80' />
     </>

diff --git a/src/app/[netname]/page.tsx b/src/app/[netname]/page.tsx
@@ -6,13 +6,17 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 import ContentHome from '@/components/layout/ContentHome';
+import NavBarMobile from '@/components/global/NavBarMobile';
 import CreateBounty from '@/components/ui/CreateBounty';
+import { useScreenSize } from '@/hooks/useScreenSize';
 
 export default function Home() {
+  const isMobile = useScreenSize();
+
   return (
     <>
       <ContentHome />
-      <CreateBounty />
+      {isMobile ? <NavBarMobile type='bounty' /> : <CreateBounty />}
       <ToastContainer />
     </>
   );

diff --git a/src/components/global/GameButton.tsx b/src/components/global/GameButton.tsx
@@ -1,10 +1,10 @@
 export default function GameButton() {
   return (
-    <>
+    <div className='flex justify-center items-center'>
       <svg
         className='normal'
-        width='157'
-        height='157'
+        width='125'
+        height='125'
         viewBox='0 0 157 157'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'
@@ -371,8 +371,8 @@ export default function GameButton() {
 
       <svg
         className='press'
-        width='157'
-        height='157'
+        width='125'
+        height='125'
         viewBox='0 0 157 157'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'
@@ -1098,6 +1098,6 @@ export default function GameButton() {
           </linearGradient>
         </defs>
       </svg>
-    </>
+    </div>
   );
 }
diff --git a/src/components/global/NavBarMobile.tsx b/src/components/global/NavBarMobile.tsx
@@ -0,0 +1,62 @@
+import FormBounty from '@/components/global/FormBounty';
+import FormClaim from '@/components/global/FormClaim';
+import GameButton from '@/components/global/GameButton';
+import React, { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useAccount } from 'wagmi';
+
+export default function NavBarMobile({
+  type,
+  bountyId,
+}: {
+  type: 'claim' | 'bounty';
+  bountyId?: string;
+}) {
+  const [showForm, setShowForm] = useState(false);
+  const account = useAccount();
+  return (
+    <>
+      <nav className='fixed bottom-0 left-0 right-0 h-14 flex items-center justify-between px-8 z-50'>
+        <div
+          className='absolute inset-0 rounded-t-2xl bg-blue-300/80'
+          style={{
+            WebkitMask:
+              'radial-gradient(circle at center 5px, transparent 60px, white 60px)',
+            mask: 'radial-gradient(circle at center 5px, transparent 60px, white 60px)',
+          }}
+        />
+
+        <p className='text-white font-semibold z-10'>create</p>
+
+        <div className='w-[157px] h-[157px] -mt-8 relative z-10'>
+          <div
+            className='button bg-transparent rounded-full'
+            onClick={() => {
+              if (account.isConnected) {
+                setShowForm(true);
+                return;
+              }
+              toast.error('Please connect your wallet');
+            }}
+          >
+            <GameButton />
+          </div>
+        </div>
+
+        <p className='text-white font-semibold z-10'>{type}</p>
+      </nav>
+
+      {type === 'bounty' ? (
+        <FormBounty open={showForm} onClose={() => setShowForm(false)} />
+      ) : (
+        bountyId && (
+          <FormClaim
+            bountyId={bountyId}
+            open={showForm}
+            onClose={() => setShowForm(false)}
+          />
+        )
+      )}
+    </>
+  );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -40,7 +40,7 @@ const Header = () => {
   ];
 
   return (
-    <>
+    <div className='pb-24'>
       <Drawer
         open={isOpen}
         onClose={(cur) => setIsOpen(!cur)}
@@ -102,7 +102,7 @@ const Header = () => {
           <ConnectWalletButton />
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/ui/CreateBounty.tsx b/src/components/ui/CreateBounty.tsx
@@ -13,7 +13,7 @@ export default function CreateBounty() {
     <div className='fixed bottom-8 z-40 w-full flex justify-center items-center lg:flex-col'>
       {!showForm && (
         <div
-          className='absolute button bottom-10 flex cursor-pointer flex-col items-center justify-center'
+          className='absolute button -bottom-3 flex cursor-pointer flex-col items-center justify-center'
           onClick={() => {
             if (account.isConnected) {
               setShowForm(true);

diff --git a/src/components/ui/CreateClaim.tsx b/src/components/ui/CreateClaim.tsx
@@ -25,7 +25,7 @@ export default function CreateClaim({ bountyId }: { bountyId: string }) {
     <div className='fixed bottom-8 z-40 w-full flex justify-center items-center'>
       {!showForm && (
         <div
-          className='absolute button bottom-10 flex cursor-pointer flex-col items-center justify-center'
+          className='absolute button -bottom-3 flex cursor-pointer flex-col items-center justify-center'
           onClick={() => {
             if (account.isConnected) {
               setShowForm(true);

diff --git a/src/hooks/useScreenSize.ts b/src/hooks/useScreenSize.ts
@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+export const useScreenSize = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkScreenSize();
+
+    window.addEventListener('resize', checkScreenSize);
+
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  return isMobile;
+};