From 0b3dd45c30db59281b99ddd38558e2f68ec91440 Mon Sep 17 00:00:00 2001
From: Reportieris <evertrozenbaum@gmail.com>
Date: Mon, 22 Jul 2024 02:42:58 +0300
Subject: [PATCH] trying to make the hamburger button to expand diagonally
 downward and to the left. Doesn't want to work no matter what I try.

---
 components/Navbar.tsx                     | 145 ++++++++--------------
 public/images/NewImages/Nav_BcardLogo.svg |  15 +++
 public/images/NewImages/Nav_Hamburger.svg |   5 +
 src/styles/Navbar.module.css              |  58 ++++-----
 4 files changed, 100 insertions(+), 123 deletions(-)
 create mode 100644 public/images/NewImages/Nav_BcardLogo.svg
 create mode 100644 public/images/NewImages/Nav_Hamburger.svg

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 90c4f05..53b331a 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,114 +1,71 @@
 import React, { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import styles from '@/styles/Navbar.module.css'
 
-import logo from "../public/images/new-logo.png";
-import hamburger from "../public/images/hamburger.svg";
+import logo from "../public/images/NewImages/Nav_BcardLogo.svg";
+import hamburger from "../public/images/NewImages/Nav_Hamburger.svg";
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const router = useRouter();
-
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const isActive = (pathname: string) => {
-    return router.pathname === pathname ? `text-purple-500 ${styles['border-bottom']}` : `${styles['border-hover-bottom']}`
-  };
 
   return (
-    <nav className="flex justify-between items-center max-[767px]:px-[1rem] max-[767px]:pt-[1rem] p-[3rem]">
-      <Link href="/" className="z-50">
-        <Image
-          priority
-          src={logo}
-          className=""
-          height={56.97}
-          width={179}
-          alt="BCard"
-        />
-      </Link>
-      <div className="hidden md:flex gap-5">
-        <Link href="/for-daos" className={isActive("/for-daos")}>For Communities</Link>
-        <Link href="/for-investors" className={isActive("/for-investors")}>For Investors</Link>
-        <a
-          href="https://banklesscard.mirror.xyz/"
-          target="_blank"
-          rel="noreferrer"
-          className={`${styles['border-hover-bottom']}`}
-        >
-          Blog
-        </a>
-        <Link href="/contact-us" className={isActive("/contact-us")}>Contact Us</Link>
-      </div>
-      <div className="md:hidden">
-        <button
-          onClick={handleToggle}
-          className="block text-gray-700 hover:text-white focus:text-white focus:outline-none"
+    <>
+      <nav className="mx-[54px] mb-[54px] mt-[36px] flex h-24 items-center justify-between rounded-[20px] bg-[#2D2D2D] px-[10px]">
+        <Link
+          id="Nav_Logo"
+          href="/"
+          className="h-fit rounded-[20px] py-4 pl-4 hover:bg-[#212121]"
         >
           <Image
             priority
-            src={hamburger}
+            src={logo}
             className=""
-            height={25}
-            width={25}
-            alt="hamburger"
+            height={51}
+            width={212}
+            alt="BCard"
           />
-        </button>
+        </Link>
+
         <div
-          className={`${
-            isOpen ? "block" : "hidden"
-          } absolute top-0 left-0 w-full bg-white z-50`}
+          id="Nav_HamburgerMenuContent"
+          className={`relative bg-yellow-300 transition-all duration-300 ease-in-out ${
+            isOpen ? "h-[380px] w-[480px] p-8 pb-4" : "h-12 w-12"
+          }`}
+          style={{
+            transformOrigin: isOpen ? "top right" : "top right",
+            transform: isOpen ? "scale(1)" : "scale(1)",
+          }}
         >
-          <div className="p-4">
-            <Link
-              href="/for-daos"
-              onClick={() => {
-                setIsOpen(false);
-              }}
-            >
-              <p className="block text-gray-800 hover:text-white py-2">
-                For Communities
-              </p>
-            </Link>
-            <Link
-              href="/for-investors"
-              onClick={() => {
-                setIsOpen(false);
-              }}
-            >
-              <p className="block text-gray-800 hover:text-white py-2">
-                For Investors
-              </p>
-            </Link>
-            <a
-              href="https://banklesscard.mirror.xyz/"
-              target="_blank"
-              rel="noreferrer"
-              className="block text-gray-800 hover:text-white py-2"
-              onClick={() => {
-                setIsOpen(false);
-              }}
-            >
-              Blog
-            </a>
-            <Link
-              href="/contact-us"
-              onClick={() => {
-                setIsOpen(false);
-              }}
-            >
-              <p className="block text-gray-800 hover:text-white py-2">
-                Contact Us
-              </p>
-            </Link>
-          </div>
+          <button
+            id="Nav_Hamburger"
+            onMouseDown={() => setIsOpen(!isOpen)}
+            className="absolute right-0 top-0 z-50 block rounded-[20px] p-4 text-gray-700 hover:bg-[#212121] hover:text-white focus:text-white focus:outline-none"
+          >
+            <Image
+              priority
+              src={hamburger}
+              className=""
+              height={48}
+              width={48}
+              alt="hamburger"
+            />
+          </button>
+          {isOpen && (
+            <div className="absolute left-0 top-16 w-full">
+              <Link href="/link1" className="block py-2 text-black">
+                Link 1
+              </Link>
+              <Link href="/link2" className="block py-2 text-black">
+                Link 2
+              </Link>
+              <Link href="/link3" className="block py-2 text-black">
+                Link 3
+              </Link>
+            </div>
+          )}
         </div>
-      </div>
-    </nav>
+      </nav>
+    </>
   );
 };
 
diff --git a/public/images/NewImages/Nav_BcardLogo.svg b/public/images/NewImages/Nav_BcardLogo.svg
new file mode 100644
index 0000000..87dd0d3
--- /dev/null
+++ b/public/images/NewImages/Nav_BcardLogo.svg
@@ -0,0 +1,15 @@
+<svg width="213" height="52" viewBox="0 0 213 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_577_354)">
+<path d="M31.8659 1.13175C30.0688 2.28519 26.9597 4.61363 24.4551 8.61295C21.7554 12.9222 21.0967 17.0266 20.9016 19.1583H14.7377C6.67368 19.1583 0.135742 12.6581 0.135742 4.64058V1.08594H30.7031C31.0934 1.08594 31.481 1.10211 31.8659 1.13175Z" fill="#9A191E"/>
+<path d="M45.0337 17.4417C45.0175 18.0912 45.0039 18.6679 45.0337 19.1584H20.9014C21.0965 17.0267 21.7552 12.9223 24.455 8.61303C26.9595 4.61372 30.0686 2.28528 31.8657 1.13184C32.6924 1.19921 33.5029 1.33396 34.2835 1.53338C34.3811 1.56033 34.4787 1.58459 34.5763 1.61423C34.6034 1.62232 34.6305 1.6304 34.6603 1.63849C34.8094 1.68161 34.9612 1.73012 35.1157 1.77863C35.853 2.02117 36.6445 2.34187 37.4549 2.76767C37.5688 2.82966 37.6853 2.89434 37.8019 2.95902C37.9293 3.03178 38.0567 3.10454 38.1868 3.18539C38.3115 3.26085 38.4362 3.339 38.5609 3.41985C38.6584 3.48184 38.756 3.54652 38.8509 3.61389C38.9485 3.67857 39.0461 3.74864 39.1409 3.81871C39.2195 3.8753 39.3008 3.93459 39.3795 3.99388C39.496 4.08012 39.6099 4.17175 39.7264 4.26607C39.8186 4.33883 39.9107 4.41699 40.0029 4.49514C40.0734 4.55712 40.1438 4.61641 40.2143 4.6784C40.2821 4.73769 40.3498 4.79967 40.4176 4.86165C40.4854 4.92094 40.5531 4.98293 40.6182 5.04491C42.9032 7.22243 44.4618 10.1438 44.9063 13.4154C44.9199 13.5313 44.9335 13.6472 44.947 13.7631C44.9687 13.976 44.9877 14.1862 45.0039 14.3937C45.0066 14.4719 45.0121 14.5527 45.0148 14.6309C45.0283 14.8626 45.0337 15.0971 45.0337 15.3316V17.4417Z" fill="#D02128"/>
+<path d="M45.0337 37.5324V33.7056H20.9474V33.6921C21.5709 32.2853 22.4844 29.7251 22.4708 26.413C22.46 23.1063 21.5329 20.5596 20.9014 19.1582H45.0337C44.3886 20.5165 43.345 23.1899 43.4182 26.6879C43.486 29.9084 44.4699 32.3662 45.1178 33.6921C45.1178 35.0692 45.1042 36.3412 45.0337 37.5324Z" fill="#9A191E"/>
+<path d="M45.0336 33.7061V37.5329C44.9441 39.0933 44.7517 40.5162 44.3586 41.8583C44.3559 41.8772 44.3505 41.8933 44.3424 41.9122C43.7135 43.8499 42.6781 45.607 41.3363 47.0838C41.2469 47.1835 41.1547 47.2805 41.0598 47.3776C40.9812 47.4611 40.9026 47.5393 40.8213 47.6174C40.7319 47.7063 40.6424 47.7926 40.553 47.8734C38.1405 50.1075 35.2863 51.0912 33.3645 51.5305C33.3536 51.5359 33.3401 51.5386 33.3292 51.5386C32.76 51.6437 32.1772 51.7164 31.5863 51.7515C29.8109 50.5819 27.0109 48.3989 24.6852 44.8066C21.7577 40.2871 21.118 35.9051 20.9473 33.7061H45.0336Z" fill="#D02128"/>
+<path d="M31.5867 51.7515C31.294 51.7703 31.0012 51.7784 30.7031 51.7784H0.135742V48.2238C0.135742 40.2063 6.67368 33.7061 14.7377 33.7061H20.9476C21.1184 35.9051 21.7581 40.2871 24.6856 44.8066C27.0112 48.3989 29.8113 50.5819 31.5867 51.7515Z" fill="#9A191E"/>
+</g>
+<path d="M58.2879 41L58.2879 12.833L72.5559 12.833C77.5989 12.833 81.0839 15.785 81.0839 19.885C81.0839 22.755 79.6489 24.846 77.1479 26.158C80.4279 27.634 82.3139 30.258 82.3139 33.374C82.3139 37.884 78.4599 41 73.0889 41H58.2879ZM64.3149 24.19L71.0389 24.19C73.2939 24.19 74.8929 22.878 74.8929 21.074C74.8929 19.311 73.2939 17.999 71.0389 17.999H64.3149V24.19ZM64.3149 35.834H71.9819C74.4009 35.834 76.1229 34.399 76.1229 32.39C76.1229 30.381 74.4009 28.946 71.9819 28.946L64.3149 28.946V35.834ZM100.158 41.492C92.0809 41.492 85.1929 34.809 85.1929 26.896C85.1929 18.983 92.0809 12.341 100.158 12.341C104.422 12.341 108.358 14.145 111.105 17.056L106.718 20.992C105.078 19.106 102.741 17.835 100.158 17.835C95.4429 17.835 91.4249 22.017 91.4249 26.896C91.4249 31.816 95.4429 35.998 100.158 35.998C102.741 35.998 105.078 34.727 106.718 32.841L111.105 36.777C108.358 39.647 104.422 41.492 100.158 41.492ZM135.102 41L133.298 36.572H120.752L118.948 41H112.183L123.663 12.833L130.428 12.833L141.908 41H135.102ZM122.843 31.447H131.207L127.025 21.156L122.843 31.447ZM168.639 41L161.751 41L155.314 31.857L150.845 31.857V41H144.818V12.833L157.487 12.833C163.596 12.833 168.106 16.769 168.106 22.345C168.106 26.527 165.564 29.807 161.71 31.16L168.639 41ZM150.845 18.368V26.322L156.831 26.322C159.824 26.322 161.874 24.764 161.874 22.345C161.874 19.926 159.824 18.368 156.831 18.368H150.845ZM172.441 41V12.833L182.527 12.833C191.998 12.833 198.722 18.655 198.722 26.896C198.722 35.137 191.998 41 182.527 41H172.441ZM178.468 35.506H183.306C188.677 35.506 192.49 31.939 192.49 26.896C192.49 21.894 188.677 18.327 183.306 18.327H178.468V35.506Z" fill="white"/>
+<defs>
+<clipPath id="clip0_577_354">
+<rect width="45.2533" height="51.0128" fill="white" transform="translate(0 0.951172)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/NewImages/Nav_Hamburger.svg b/public/images/NewImages/Nav_Hamburger.svg
new file mode 100644
index 0000000..8a7660b
--- /dev/null
+++ b/public/images/NewImages/Nav_Hamburger.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<path d="M8 12H40M8 24H40M26 36H40" stroke="white" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/styles/Navbar.module.css b/src/styles/Navbar.module.css
index 9a2a430..79624ae 100644
--- a/src/styles/Navbar.module.css
+++ b/src/styles/Navbar.module.css
@@ -1,33 +1,33 @@
-.border-bottom{
-    position: relative;
+.border-bottom {
+  position: relative;
 }
-.border-bottom::after{
-    content: "";
-    width: 100%;
-    height: 3px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    margin-bottom: -6px;
-    --tw-text-opacity: 1;
-    background-color: rgb(168 85 247 / var(--tw-text-opacity));
+.border-bottom::after {
+  content: "";
+  width: 100%;
+  height: 3px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-bottom: -6px;
+  --tw-text-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-text-opacity));
 }
-.border-hover-bottom{
-    position: relative;
+.border-hover-bottom {
+  position: relative;
 }
-.border-hover-bottom::after{
-    content: "";
-    width: 100%;
-    height: 3px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    margin-bottom: -6px;
-    --tw-text-opacity: 1;
-    background-color: #ccc;
-    transform: scaleX(0);
-    transition: 0.5s;
+.border-hover-bottom::after {
+  content: "";
+  width: 100%;
+  height: 3px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-bottom: -6px;
+  --tw-text-opacity: 1;
+  background-color: #ccc;
+  transform: scaleX(0);
+  transition: 0.5s;
+}
+.border-hover-bottom:hover::after {
+  transform: scaleX(1);
 }
-.border-hover-bottom:hover::after{
-    transform: scaleX(1);
-}
\ No newline at end of file