LogoLinksIssueFixed

src/components/home.jsx

@@ -38,9 +38,21 @@ function Home({ isDark, toggleDarkMode }) {
   })
 
   const [waveSvg, setWaveSvg] = useState(() => waveInit(wave))
-
+  const [scrolled, setScrolled] = useState(false)
+  const handleScroll = () => {
+    const offset = window.scrollY
+    if (offset > 10) {
+      setScrolled(true)
+    } else {
+      setScrolled(false)
+    }
+  }
   useEffect(() => {
     setWaveSvg(waveInit(wave))
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, [wave])
 
   const { height, xmlns, path, animatedPath } = waveSvg.svg
@@ -155,7 +167,7 @@ function Home({ isDark, toggleDarkMode }) {
   return (
     <div className="relative md:h-screen bg-light-grey dark:bg-black">
       <Banner />
-      <Navbar isDark={isDark} toggleDarkMode={toggleDarkMode} color={bgColor} />
+      <Navbar isDark={isDark} toggleDarkMode={toggleDarkMode} scrolled={scrolled} />
       <float-menu
         className="absolute z-50 block h-0 "
         style={{ top: '20%' }}
@@ -168,7 +180,7 @@ function Home({ isDark, toggleDarkMode }) {
             toggleModal={handleExportSVG}
           />
         )}
-        <div className="flex flex-col-reverse items-center justify-center w-full h-4/5 center-container md:flex-row ">
+        <div className="flex flex-col-reverse items-center justify-center w-full h-4/5 center-container md:flex-row md:space-x-4" style={{ marginTop: scrolled ? '90px' : '10px' }}>
           <Canvas
             svg={svg}
             invert={invert}

src/components/nav.jsx

@@ -9,9 +9,15 @@ import { ReactComponent as TwitterLogo } from './../assets/twitter.svg'
 
 import './../styles/nav.css'
 
-function Navbar({ isDark, toggleDarkMode, color }) {
+function Navbar({ isDark, toggleDarkMode, color, scrolled }) {
   return (
-    <div className="z-10 flex items-center justify-between w-full h-16 m-2 dark:text-white">
+    <div
+      className={`${
+        scrolled ?
+          'fixed top-0 left-0 z-10 bg-white dark:bg-gray-800 shadow flex items-center justify-between w-full h-16 dark:text-white transition-all duration-300'
+          : 'z-10 flex items-center justify-between w-full h-16 m-2 dark:text-white transition-all duration-300'
+      }`}
+    >
       <div className="flex items-center px-1 mx-1 font-sans text-lg font-bold nav-item max-h-16 sm:mx-3 sm:px-3">
         <h3 className="relative logo-name text-md">
           <span className="text-black nav-logo dark:text-white">Svg </span>
@@ -49,4 +55,4 @@ function Navbar({ isDark, toggleDarkMode, color }) {
   )
 }
 
-export default Navbar
+export default Navbar

src/styles/nav.css

@@ -1,3 +1,23 @@
+.mydiv{
+  display: flex;
+  flex-direction: column;
+}
+
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 64px;
+  transition: background-color 0.3s, box-shadow 0.3s; 
+}
+
+.scrolled {
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 999999;
+}
+
 .nav-logo {
   /* font-family: 'Charmonman', cursive; */
   font-size: 1.1rem;
@@ -59,4 +79,4 @@
   .not-mobile {
     display: none;
   }
-}
+}