refactor : navbar

TEDx-SJEC · Oct 27, 2024 · a8e5c07 · a8e5c07
1 parent 7dc068d
commit a8e5c07
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 48 deletions.
diff --git a/src/components/edil-ozi/text-glitch.tsx b/src/components/edil-ozi/text-glitch.tsx
@@ -17,10 +17,10 @@ const TextGlitchEffect: FC<Props> = ({ textOne, textTwo, className }) => {
       )}
     >
       <span className="invisible whitespace-nowrap">{textOne}</span>
-      <span className="absolute left-0 top-0 text-red-600 transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
+      <span className="absolute left-0 top-0 text-black transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
         {textOne}
       </span>
-      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-white whitespace-nowrap">
+      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-red-600 whitespace-nowrap">
         {textTwo}
       </span>
     </div>

diff --git a/src/components/navbar/nav-header.tsx b/src/components/navbar/nav-header.tsx
@@ -11,52 +11,64 @@ interface NavHeaderProps {
 
 const NavHeader: React.FC<NavHeaderProps> = ({ handleClick }) => {
   const menuToggle = useRef(null);
-  return (  
+
+  const handleMenuClick = () => {
+    handleClick();
+
+    // Toggle overflow style on the body to enable/disable scrolling
+    if (document.body.style.overflow === "hidden") {
+      document.body.style.overflow = "auto";
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+  };
+
+  return (
     <>
-    <header className="fixed  z-50 aboute left-0 top-0 w-screen">
-      <div className="header-1 flex md:py-[15px] md:px-[30px] px-3 py-4  justify-between  items-center  ">
-        <div className="logo">
-          <Link href="/">
-            <Image
-              src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
-              height={200}
-              width={200}
-              alt="logo"
-              layout="fixed"
-              priority={true}
-            />
-          </Link>
-        </div>
-        <div className="flex justify-between items-center ">
-          <button
-            id="menuToggle"
-            ref={menuToggle}
-            onClick={handleClick}
-            className="menu-toggle bg-transparent border-none cursor-pointer"
-          >
-            <svg
-              viewBox="0 0 12 10"
-              className="hamburger"
-              height="40px"
-              width="40px"
+      <header className="fixed z-50 aboute left-0 top-0 w-screen">
+        <div className="header-1 flex md:py-[15px] md:px-[30px] px-3 py-4 justify-between items-center">
+          <div className="logo">
+            <Link href="/">
+              <Image
+                src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
+                height={200}
+                width={200}
+                alt="logo"
+                layout="fixed"
+                priority={true}
+              />
+            </Link>
+          </div>
+          <div className="flex justify-between items-center">
+            <button
+              id="menuToggle"
+              ref={menuToggle}
+              onClick={handleMenuClick}
+              className="menu-toggle bg-transparent border-none cursor-pointer"
             >
-              <path
-                d="M10,2 L2,2"
-                className="bar-1 fill-none stroke-white"
-              ></path>
-              <path
-                d="M2,5 L10,5"
-                className="bar-2 fill-none stroke-white"
-              ></path>
-              <path
-                d="M10,8 L2,8"
-                className="bar-3 fill-none stroke-white"
-              ></path>
-            </svg>
-          </button>
+              <svg
+                viewBox="0 0 12 10"
+                className="hamburger"
+                height="40px"
+                width="40px"
+              >
+                <path
+                  d="M10,2 L2,2"
+                  className="bar-1 fill-none stroke-white"
+                ></path>
+                <path
+                  d="M2,5 L10,5"
+                  className="bar-2 fill-none stroke-white"
+                ></path>
+                <path
+                  d="M10,8 L2,8"
+                  className="bar-3 fill-none stroke-white"
+                ></path>
+              </svg>
+            </button>
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
     </>
   );
 };

diff --git a/src/components/navbar/nav-items.tsx b/src/components/navbar/nav-items.tsx
@@ -9,17 +9,17 @@ type NavItemProps = {
 
 const NavItem = ({ href, textOne, textTwo }: NavItemProps) => {
   return (
-    <li className="listo list-none overflow-hidden mt-[10px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]">
+    <li className="listo list-none overflow-hidden mt-[10px] leading-[1] font-bold text-black  text-[35px] md:text-[43px]">
       <Link
         href={href}
-        className=" my-2 text-xl font-bold text-[40px] md:text-[50px]"
+        className=" my-2 text-xl font-bold text-[35px] md:text-[43px]"
         rel="noopener noreferrer"
         target="_blank"
       >
         <TextGlitch
           textOne={textOne}
           textTwo={textTwo}
-          className="font-bold text-black  text-[40px] md:text-[50px] leading-tight"
+          className="font-bold text-black  text-[35px] md:text-[43px] leading-tight"
         />
       </Link>
     </li>