From 692d73f97a62beab9dcda99443fd1c6944bc87c3 Mon Sep 17 00:00:00 2001
From: Dex404 <x@keshawa.me>
Date: Tue, 16 Apr 2024 09:04:20 +0000
Subject: [PATCH] navbar

---
 components/Button/Button.tsx |   4 +-
 components/Navbar/Navbar.tsx | 202 ++++++++++++++++++++++++++---------
 2 files changed, 151 insertions(+), 55 deletions(-)

diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
index 0f379b2..980e86c 100644
--- a/components/Button/Button.tsx
+++ b/components/Button/Button.tsx
@@ -36,7 +36,7 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
         "border-solid",
         "border-2",
         "border-slate-100",
-        "flex",
+
         "mx-auto",
       ],
       hero1: [
@@ -67,7 +67,6 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
         "hover:border-white",
         "rounded",
         "flex",
-        ,
         "my-1",
         "w-[50%]",
         "max-md:w-full",
@@ -77,6 +76,7 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
       sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
       lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
       hero1: ["min-w-15", "h-full", "min-h-5", "text-sm", "px-5", "py-2"],
+      hero2: ["min-w-15", "h-full", "min-h-5", "text-sm", "px-2", "py-0"],
     },
     underline: { true: ["underline"], false: [] },
   },
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index ae6732a..8bf6972 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -33,65 +33,161 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
     transition: "transform .2s", // Optional: Smooth transition
   }
 
+  const [isNavOpen, setIsNavOpen] = useState(false)
+
+  const mobileNavStyle = {
+    display: isNavOpen ? "block" : "none",
+  }
+
+  const desktopNavStyle = {
+    display: isNavOpen ? "none" : "block",
+  }
+
   return (
     <nav
       className={`${
         showBackground ? "backdrop-blur" : "bg-transparent"
-      } fixed left-0 top-0 z-50 flex h-20 w-full items-center justify-between px-4 text-white`}
+      } fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
     >
-      <a href="/">
-        <img src={logoSrc} alt="VizoleLabs" className="h-5 text-white" />
-      </a>
-      <ul className="hidden space-x-4 text-lg font-medium md:flex">
-        <li>
-          <a href="/" className="hover:text-vizoleG2">
-            Home
-          </a>
-        </li>
-        <li>
-          <a href="/services" className="hover:text-vizoleG2">
-            Services
-          </a>
-        </li>
-        <li>
-          <a href="/portfolio" className="hover:text-vizoleG2">
-            Portfolio
-          </a>
-        </li>
-        <li>
-          <a href="/about-us" className="hover:text-vizoleG2">
-            About Us
-          </a>
-        </li>
-        <li>
-          <a href="/contact-us" className="hover:text-vizoleG2">
-            Contact Us
-          </a>
-        </li>
-      </ul>
-      <div className="flex items-center">
-        <Button
-          href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
-          intent="navSignIn"
-          size="hero1"
-        >
-          Sign In
-        </Button>
-        <Button
-          href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
-          intent="navSignUp"
-          size="hero1"
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
-        >
-          Sign Up
-          <div className="ml-2">
-            <span>
-              <FaArrowRight style={imgStyle} className="text-white" />
-            </span>
+      <section className="MOBILE-MENU flex hidden" style={mobileNavStyle}>
+        <div>
+          {" "}
+          <div className="CROSS-ICON absolute right-0 top-0 px-8 py-8">
+            <button onClick={() => setIsNavOpen(!isNavOpen)}>
+              <svg
+                className="h-8 w-8 text-gray-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
           </div>
-        </Button>
-      </div>
+          <ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white backdrop-blur">
+            <li className="my-2 border-b border-gray-400 uppercase">
+              <a href="/about">Home</a>
+            </li>
+            <li className="my-2 border-b border-gray-400 uppercase">
+              <a href="/portfolio">Services</a>
+            </li>
+            <li className="my-2 border-b border-gray-400 uppercase">
+              <a href="/contact">Portfolio</a>
+            </li>
+            <li className="my-2 border-b border-gray-400 uppercase">
+              <a href="/contact">About</a>
+            </li>
+            <li className="my-2 border-b border-gray-400 uppercase">
+              <a href="/contact">Sign In</a>
+            </li>
+            <li className="my-2 border-b border-gray-400 uppercase">
+              <a href="/contact">Sign Up</a>
+            </li>
+          </ul>
+        </div>
+      </section>
+      <section style={desktopNavStyle}>
+        <div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
+          <a href="#" className="flex items-center space-x-3 rtl:space-x-reverse">
+            <img src={logoSrc} className="h-8" alt="Vizolelabs Logo" />
+          </a>
+          <div className="flex space-x-3 rtl:space-x-reverse md:order-3 md:space-x-0">
+            <li className="hidden md:block">
+              <Button
+                href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
+                intent="navSignIn"
+                size="hero1"
+              >
+                Sign In
+              </Button>
+            </li>
+            <li className="hidden lg:block">
+              <Button
+                href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
+                intent="navSignUp"
+                size="hero2"
+                onMouseEnter={() => setHovered(true)}
+                onMouseLeave={() => setHovered(false)}
+              >
+                Sign Up
+                <div className="ml-2">
+                  <span>
+                    <FaArrowRight style={imgStyle} className="text-white" />
+                  </span>
+                </div>
+              </Button>
+            </li>
+            <button
+              onClick={() => setIsNavOpen(!isNavOpen)}
+              data-collapse-toggle="navbar-sticky"
+              type="button"
+              className="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 lg:hidden"
+              aria-controls="navbar-sticky"
+              aria-expanded="false"
+            >
+              <span className="sr-only">Open main menu</span>
+              <svg
+                className="h-5 w-5"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 17 14"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M1 1h15M1 7h15M1 13h15"
+                />
+              </svg>
+            </button>
+          </div>
+          <div className="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto" id="navbar-sticky">
+            <ul className="mt-4 flex flex-col rounded-lg border border-gray-100 bg-transparent p-4 font-medium rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-transparent md:p-0 md:dark:bg-gray-900">
+              <div className="mt-2 flex flex-col rounded-lg border border-gray-100 bg-transparent font-medium rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:mt-2 md:flex-row md:space-x-8 md:border-0 md:bg-transparent md:p-0 md:dark:bg-gray-900">
+                <li>
+                  <a
+                    href="#"
+                    className="block rounded px-3 py-2 text-white hover:text-vizoleG2 md:p-0"
+                    aria-current="page"
+                  >
+                    Home
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
+                  >
+                    Services
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
+                  >
+                    Portfolio
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
+                  >
+                    About
+                  </a>
+                </li>
+              </div>
+            </ul>
+          </div>
+        </div>
+      </section>
     </nav>
   )
 }