Add header fix

Author: Muchael123

src/components/Events/Events.tsx

@@ -75,7 +75,7 @@ export default function Events() {
           />
         ))}
 
-        <div className="flex items-center justify-center pt-1 tracking-wide text-white md:pt-0 md:text-right md:absolute md:bottom-24 md:right-10 2xl:bottom-26 lg:right-16">
+        <div className="flex items-center justify-center pt-1 tracking-wide mt-4 text-white md:pt-0 md:text-right md:absolute md:bottom-24 md:right-10 2xl:bottom-26 lg:right-16">
           <Link href="https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events">
             <a
               target="_blank"

src/components/HeroHeader/HeroHeader.tsx

@@ -20,7 +20,7 @@ export default function HeroHeader() {
   if (!screenWidth) return null;
 
   return (
-    <div id="hero" className="pt-2  bg-[#060b17]">
+    <div id="hero" className="pt-2 bg-[#060b17]">
       {screenWidth < breakpoint ? <MobileHero /> : <DesktopHero />}
     </div>
   );

src/components/HeroHeader/MobileHero.tsx

@@ -1,11 +1,6 @@
-import Image from 'next/image';
+
 import React from 'react';
-import Logo from '../Logo';
-import githubIcon from '../../../public/img/github-logo.svg';
-import DropdownMenu from './DropdownMenu';
 import LinkButton from '../LinkButton/LinkButton';
-import Link from 'next/link';
-import { HOME } from '../../util/routeConstants';
 import backgroundImage from '/public/images/hero-image.jpg'; // Add your background image here
 
 export default function MobileHero() {
@@ -16,22 +11,7 @@ export default function MobileHero() {
         backgroundImage: `url(${backgroundImage.src})`
       }}
     >
-      <div className="mx-6 pt- pb-5 flex justify-between">
-        <Link href={HOME}>
-          <a>
-            <Logo size={60} />
-          </a>
-        </Link>
-        <a
-          target="_blank"
-          href="https://github.com/reactdeveloperske/reactdevske-website"
-          rel="noopener noreferrer"
-          className="pt-[13px]"
-        >
-          <Image src={githubIcon} alt="GitHub Logo" width={35} height={35} />
-        </a>
-        <DropdownMenu />
-      </div>
+      
       <div className="bg-black bg-opacity-50 p-6 rounded-md"> {/* Adds opacity to make text more legible */}
         <h1 className="font-robotoMono font-medium text-2xl text-center mb-2 text-white">
           React Developer Community Kenya 

…c/components/HeroHeader/DropdownMenu.tsx src/components/Navbar/DropdownMenu.tsxsrc/components/HeroHeader/DropdownMenu.tsx renamed to src/components/Navbar/DropdownMenu.tsx src/components/HeroHeader/DropdownMenu.tsx renamed to src/components/Navbar/DropdownMenu.tsx

@@ -1,22 +1,39 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import Logo from '../Logo/Logo';
 
 import { ABOUT, CONTACT, EVENTS, HOME } from '../../util/routeConstants';
 import LinkButton from '../LinkButton/LinkButton';
+import DropdownMenu from './DropdownMenu';
 
 export default function Navbar() {
+  const [screenWidth, setScreenWidth] = useState<number | null>(null);
+
+  const breakpoint = 768;
+
+  useEffect(() => {
+    setScreenWidth(window.innerWidth);
+
+    const handleResize = () => setScreenWidth(window.innerWidth);
+
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  if (!screenWidth) return null;
   return (
-    <>
-      <header className="lg:pl-[49px]  w-full bg-black bg-opacity-50 z-10">
-        <nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
-          <div>
-            <Link href={HOME}>
-              <a>
-                <Logo size={60} />
-              </a>
-            </Link>
-          </div>
+    <header className="lg:pl-[49px] fixed top-0  w-full bg-black bg-opacity-50 z-10">
+      <nav className="nav py-2 md:py-4  md:pl-5 flex flex-row justify-around items-center">
+        <div>
+          <Link href={HOME}>
+            <a>
+              <Logo size={screenWidth > breakpoint ? 60: 45} />
+            </a>
+          </Link>
+        </div>
+       {screenWidth > breakpoint ? (
+         <div className='flex-1  flex flex-row justify-end gap-[20%] items-center max-w-[60%]'>
           <div className="">
             <ul className="font-montserrat text-base text-white flex flex-row justify-between items-center md:space-x-[30px]">
               <a href={ABOUT}>
@@ -40,8 +57,10 @@ export default function Navbar() {
               Join Community
             </LinkButton>
           </div>
-        </nav>
-      </header>
-    </>
+        </div>): (
+          <DropdownMenu/>
+        )}
+      </nav>
+    </header>
   );
 }

src/components/Navbar/Navbar.tsx

@@ -23,9 +23,8 @@ export default function Home() {
         />
       </Head>
       <main className="">
-      <div className="fixed w-[100%] top-0 z-50">
         <Navbar />
-      </div>
+    
         <HeroHeader />
         <div className="flex flex-col py-12 bg-[#030e30] text-white">
           <AboutUs />