Refactor Navbar

GovNFT · Jul 26, 2024 · ad63c3b · ad63c3b
1 parent d4a1805
commit ad63c3b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 35 deletions.
diff --git a/flowbite.config.ts b/flowbite.config.ts
@@ -14,11 +14,6 @@ export default {
         gray: "text-gray-900 bg-white border border-white hover:bg-white hover:text-primary disabled:hover:bg-white dark:bg-gray-50 dark:text-gray-700 dark:border-gray-50 dark:hover:text-primary dark:hover:bg-white dark:disabled:hover:bg-gray-50",
       },
     },
-    navbar: {
-      root: {
-        base: "py-2.5",
-      },
-    },
     avatar: {
       root: {
         base: "flex items-start",

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,15 +1,18 @@
-import { Navbar } from "flowbite-react";
+import { Menu as MenuIcon } from "lucide-react";
+import { useState } from "react";
 import { SvgLoader } from "react-svgmt";
 
 import { useAccount, useSwitchChain } from "wagmi";
 import { CollectionSwitcher } from "#/components/CollectionSwitcher";
 import NavLink from "#/components/NavLink";
 import Profile from "#/components/Profile";
 import { DEFAULT_CHAIN } from "#/constants";
+import HeaderNav from "./HeaderNav";
 
 export default function Header() {
   const { chain, isConnected } = useAccount();
   const { switchChain } = useSwitchChain();
+  const [showMenu, setShowMenu] = useState(false);
 
   const isInvalidChain = isConnected && chain?.id !== DEFAULT_CHAIN.id;
   return (
@@ -30,36 +33,40 @@ export default function Header() {
           and continue using the app.
         </div>
       )}
-      <Navbar fluid={true} rounded={true} border={false}>
-        <Navbar.Brand href="/">
+
+      <div className="flex justify-between">
+        <NavLink className="flex gap-1 items-center" href="/">
           <SvgLoader src="/govnft.svg" className="block h-7 w-auto mr-4" alt="GOVNFT" />
-          <SvgLoader src="/wordmark.svg" className="h-5 w-auto dark:text-white" alt="GOVNFT" />
-        </Navbar.Brand>
-        <Navbar.Toggle />
+          <SvgLoader src="/wordmark.svg" className="hidden lg:block h-5 w-auto dark:text-white" alt="GOVNFT" />
+        </NavLink>
 
-        <Navbar.Collapse>
-          <div className="flex gap-2 items-center justify-between bg-gray-300/20 md:bg-transparent dark:bg-gray-700/10 md:dark:bg-transparent md:bg-transparent p-4 md:p-0 rounded-lg">
-            <div className="flex gap-2 items-center">
-              <NavLink size="sm" color="light" href="/dash">
-                <div className="h-10 border border-gray-200 hover:border-gray-300 dark:border-gray-700/40 hover:dark:border-gray-700/80 px-4 rounded-xl flex items-center justify-center">
-                  <div className="uppercase font-bold tracking-widest text-[11px] px-2">Dashboard</div>
-                </div>
-              </NavLink>
+        <div className="flex gap-2 items-center">
+          {/* DESKTOP MENU */}
+          <div className="hidden md:flex gap-2 items-center">
+            <HeaderNav />
+          </div>
 
-              <NavLink size="sm" color="light" href="/create">
-                <div className="h-10 border border-gray-200 hover:border-gray-300 dark:border-gray-700/40 hover:dark:border-gray-700/80 px-4 rounded-xl flex items-center justify-center">
-                  <div className="uppercase font-bold tracking-widest text-[11px] px-2">Create</div>
-                </div>
-              </NavLink>
-            </div>
+          {/* SETTINGS MENU */}
+          <div className="hidden md:block px-2 text-xs text-gray-500">&middot;</div>
+          <CollectionSwitcher />
+          <Profile />
 
-            <div className="flex gap-2 items-center">
-              <CollectionSwitcher />
-              <Profile />
-            </div>
+          {/* TOGGLE MENU */}
+          <div
+            className="flex md:hidden items-center h-10 flex py-2 px-3 text-xs bg-gray-900 bg-opacity-5 hover:bg-opacity-10 dark:bg-gray-700 dark:bg-opacity-20 dark:hover:bg-opacity-40 rounded-lg cursor-pointer text-gray-600 dark:text-gray-400"
+            onClick={() => (showMenu !== true ? setShowMenu(true) : setShowMenu(false))}
+          >
+            <MenuIcon size={14} />
           </div>
-        </Navbar.Collapse>
-      </Navbar>
+        </div>
+      </div>
+
+      {/* MOBILE MENU */}
+      {showMenu && (
+        <div className="py-6 flex flex-col gap-2">
+          <HeaderNav />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
@@ -0,0 +1,18 @@
+import NavLink from "#/components/NavLink";
+
+export default function HeaderNav() {
+  return (
+    <>
+      <NavLink size="sm" color="light" href="/dash">
+        <div className="h-10 border border-gray-200 hover:border-gray-300 dark:border-gray-700/40 hover:dark:border-gray-700/80 px-4 rounded-xl flex items-center justify-center">
+          <div className="uppercase font-bold tracking-widest text-[11px]">Dashboard</div>
+        </div>
+      </NavLink>
+      <NavLink size="sm" color="light" href="/create">
+        <div className="h-10 border border-gray-200 hover:border-gray-300 dark:border-gray-700/40 hover:dark:border-gray-700/80 px-4 rounded-xl flex items-center justify-center">
+          <div className="uppercase font-bold tracking-widest text-[11px]">Create</div>
+        </div>
+      </NavLink>
+    </>
+  );
+}
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
@@ -79,10 +79,8 @@ export default function Profile() {
             onClick={() => setShowDisconnect(true)}
           >
             <div className="flex items-center gap-3 sm:pl-0.5 text-gray-600 dark:text-gray-400">
-              <span className="hidden sm:inline">
-                <AddressMask address={address} />
-              </span>
-              <SettingsIcon size={12} />
+              <AddressMask address={address} className="hidden md:inline" />
+              <SettingsIcon size={14} />
             </div>
           </div>
         </div>