update mobile navbar

EdwardsVO · May 18, 2022 · decc55c · decc55c
1 parent 1d64d3d
commit decc55c
Show file tree

Hide file tree

Showing 10 changed files with 4,708 additions and 98 deletions.
diff --git a/frontend/components/Gallery/GalleryInfo.tsx b/frontend/components/Gallery/GalleryInfo.tsx
@@ -99,9 +99,6 @@ export default function GalleryInfo() {
     <div>
       <div className="min-h-screen min-w-full mb-20">
         <div className="p-4">
-          <div className="lg:hidden">
-            <img src="/logo.png" alt="logo" className="w-36" />
-          </div>
           <div className="mt-6 lg:hidden w-full">
             <SearchBarDesktop
               className="rounded-lg border-2 h-8 py-px px-3 w-full"

diff --git a/frontend/components/LandingdApp/Landing.tsx b/frontend/components/LandingdApp/Landing.tsx
@@ -48,10 +48,7 @@ export default function Landing() {
   return (
     <div className="min-h-screen min-w-full mb-20">
       <div className="p-4">
-        <div className="lg:hidden">
-          <img src="/logo.png" alt="logo" className="w-36" />
-        </div>
-        <div className="mt-6 lg:hidden">
+        <div className="mt-2 lg:hidden">
           <SearchBar />
         </div>
         <div className="mt-5 flex space-x-4">

diff --git a/frontend/components/Layout.tsx b/frontend/components/Layout.tsx
@@ -44,11 +44,11 @@ function Layout({ children }: LayoutProps) {
       <div className="hidden lg:block">
         <Navbar />
       </div>
-      {children}
-      {/* Mobile navs goes on the footer of the page, so no footer will be shown on this screen size. */}
       <div className="lg:hidden">
         <MobileNav />
       </div>
+      {children}
+      {/* Mobile navs goes on the footer of the page, so no footer will be shown on this screen size. */}
       <div className="hidden lg:block">
         <Footer />
       </div>

diff --git a/frontend/components/Mint/Mint.tsx b/frontend/components/Mint/Mint.tsx
@@ -3,26 +3,19 @@ import MintForm from './MintForm';
 import useUser from '../../hooks/useUser';
 
 export default function Mint() {
-
   const [user] = useUser();
 
   return (
     <div className="p-4">
-      <div className="lg:hidden">
-        <img src="/logo.png" alt="logo" className="w-36" />
-      </div>
       <div className="mt-5">
         <h2 className="text-figma-100 font-semibold text-xl">Mint NFT</h2>
       </div>
       <div className="mt-3">
-        { user != "" ?
-        <MintForm />
-        : (
-          <div className='h-screen'>
-            Please connect your wallet...
-          </div>
-        )
-        }
+        {user != '' ? (
+          <MintForm />
+        ) : (
+          <div className="h-screen">Please connect your wallet...</div>
+        )}
       </div>
     </div>
   );

diff --git a/frontend/components/Profile/Profile.tsx b/frontend/components/Profile/Profile.tsx
@@ -78,7 +78,6 @@ export default function Profile() {
     if (sales?.length > 0) {
       for (let j = 0; j < tokens.length; j++) {
         for (let index = 0; index < sales.length; index++) {
-
           if (sales[index].token_id === tokens[j].token_id) {
             let wholeToken: WholeToken = {
               sale: sales[index],
@@ -141,9 +140,6 @@ export default function Profile() {
     <div>
       <div className="min-h-screen min-w-full mb-20">
         <div className="p-4">
-          <div className="lg:hidden">
-            <img src="/logo.png" alt="logo" className="w-36" />
-          </div>
           <div className="w-full my-7">
             <img src="/profile.png" alt="profile" className="w-40 mx-auto" />
           </div>

diff --git a/frontend/components/common/MobileNav.tsx b/frontend/components/common/MobileNav.tsx
@@ -1,87 +1,105 @@
 import { useRouter } from 'next/router';
 import React from 'react';
-import {
-  GalleryIcon,
-  HomeIcon,
-  PlusCircleIcon,
-  UserIcon,
-  LogOutIcon,
-  LoginIcon,
-  CogIcon,
-} from '../icons';
 
 import useUser from '../../hooks/useUser';
 import { useNear } from '../../hooks/useNear';
 import { LogOutModal } from '../modal/LogOutModal';
 
 export default function MobileNav() {
   const router = useRouter();
-  const [user, setUser] = useUser();
+  const [user] = useUser();
   const [nearContext] = useNear();
   const [showModal, setShowModal] = React.useState(false);
+  const [showMenu, setShowMenu] = React.useState(false);
+  const currentPage = router.route;
 
   const logIn = async () => {
     await nearContext.walletConnection.requestSignIn(
       nearContext.nearConfig.contractName[0]
     );
   };
 
+  function onMenuClick() {
+    setShowMenu(!showMenu);
+  }
   function onClick() {
     setShowModal(true);
   }
 
   return (
-    <div className="bg-figma-500 h-20 w-full fixed bottom-0 px-6 rounded-t-2xl">
-      <div className="flex justify-between mt-2">
-        <button
-          type="button"
-          onClick={() => {
-            router.push('/app');
-          }}
-        >
-          <HomeIcon className="w-7 h-7 self-center" />
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            router.push('/app/gallery');
-          }}
-        >
-          <GalleryIcon className="w-7 h-7 self-center" />
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            router.push('/app/mint');
-          }}
-        >
-          <PlusCircleIcon className="w-14 h-14 fill-figma-100 text-figma-200" />
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            router.push('/app/profile');
-          }}
+    <div className="w-full sticky px-6 rounded-t-2xl">
+      <div className="flex w-full justify-between items-center mt-3">
+        <div
+          className={`menu-btn w-0 ${showMenu ? 'open' : ''}`}
+          onClick={onMenuClick}
         >
-          <UserIcon className="w-7 h-7 self-center" />
-        </button>
-        <button
-          type="button"
-          className={`${user ? 'hidden' : ''}`}
-          onClick={() => {
-            logIn();
-          }}
-        >
-          <LoginIcon className="w-7 h-7 self-center text-figma-100" />
-        </button>
-        <button
-          type="button"
-          className={`${!user ? 'hidden' : ''}`}
-          onClick={onClick}
-        >
-          <LogOutIcon className="w-7 h-7 self-center text-figma-100" />
-        </button>
+          <div className="menu-btn__burger"></div>
+        </div>
+
+        <div className="lg:hidden" onClick={() => router.push('/app')}>
+          <img src="/logo.png" alt="logo" className="w-36" />
+        </div>
+        <div>
+          {user ? (
+            <div className="bg-figma-100 rounded-full text-figma-300 p-4"></div>
+          ) : (
+            <div>
+              <button
+                className="bg-figma-100 px-2 py-1.5 text-figma-300 drop-shadow-md rounded-lg"
+                onClick={logIn}
+              >
+                Login
+              </button>
+            </div>
+          )}
+        </div>
       </div>
+      {showMenu ? (
+        <div className="bg-figma-200 text-gray-600 min-h-screen flex justify-center text-lg">
+          <div className="mt-4">
+            <h2
+              className={`mt-2 ${
+                currentPage === '/app'
+                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
+                  : ''
+              }`}
+              onClick={() => router.push('/app')}
+            >
+              Home
+            </h2>
+            <h2
+              className={`mt-2 ${
+                currentPage === '/app/gallery'
+                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
+                  : ''
+              }`}
+              onClick={() => router.push('/app/gallery')}
+            >
+              Gallery
+            </h2>
+            <h2
+              className={`mt-2 ${
+                currentPage === '/app/mint'
+                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
+                  : ''
+              }`}
+              onClick={() => router.push('/app/mint')}
+            >
+              Mint
+            </h2>
+            <h2
+              className={`mt-2 ${
+                currentPage === '/app/profile'
+                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
+                  : ''
+              }`}
+              onClick={() => router.push('/app/profile')}
+            >
+              Profile
+            </h2>
+          </div>
+        </div>
+      ) : null}
       <LogOutModal setOpen={setShowModal} isOpen={showModal} />
     </div>
   );

diff --git a/frontend/components/icons/HamburgerIcon.tsx b/frontend/components/icons/HamburgerIcon.tsx
@@ -0,0 +1,22 @@
+import React, { SVGProps } from 'react';
+
+export default function HamburgerIcon({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      {...props}
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/components/icons/index.tsx b/frontend/components/icons/index.tsx
@@ -8,6 +8,8 @@ import LogOutIcon from './LogOutIcon';
 import LoginIcon from './LoginIcon';
 import ViewGridIcon from './ViewGridIcon';
 import ViewListIcon from './ViewListIcon';
+import HamburgerIcon from './HamburgerIcon';
+import CloseIcon from './CloseIcon';
 
 export {
   HomeIcon,
@@ -20,4 +22,6 @@ export {
   LoginIcon,
   ViewGridIcon,
   ViewListIcon,
+  HamburgerIcon,
+  CloseIcon,
 };