feat: added SmoothScroll without useEffect and fixed breaking changes to ThemeSwitch

steadyfall · steadyfall · commit 790f4aa1c64c · 2024-11-09T06:45:42.000-05:00
diff --git a/site/src/app/layout.tsx b/site/src/app/layout.tsx
@@ -61,9 +61,11 @@ export default function RootLayout({
       <body suppressHydrationWarning>
         <div className={`min-h-screen bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200`}>
           <div className="transition-colors duration-300">
-            <Navbar />
-            <Providers> {children} </Providers>
-            <Footer />
+            <Providers> 
+              <Navbar />
+              {children} 
+              <Footer />
+            </Providers>
           </div>
         </div>
       </body>
diff --git a/site/src/components/Navbar.tsx b/site/src/components/Navbar.tsx
@@ -1,22 +1,45 @@
-import useReadingProgress from '@/hooks/useReadingProgress'
+'use client'
+
 import ThemeSwitch from './ThemeSwitch';
 
 const Navbar = () => {
-    const completion = useReadingProgress();
+    // const completion = useReadingProgress();
 
     return (
         <header className="sticky top-0 z-50 py-6 backdrop-blur-xl mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
-                <nav className="flex items-center justify-between">
-                    <ul className="flex gap-4 sm:gap-8">
-                        <li><a href="/" className="hover:underline hover:underline-offset-4">home</a></li>
-                        <li><a href="#experience" className="hover:underline hover:underline-offset-4">experience</a></li>
-                        {/* <li><a href="#education" className="hover:underline hover:underline-offset-4">education</a></li> */}
-                        <li><a href="#projects" className="hover:underline hover:underline-offset-4">projects</a></li>
-                    </ul>
-                    <div className="flex gap-0 sm:gap-4">
-                        <ThemeSwitch />
-                    </div>
-                </nav>
+            <nav className="flex items-center justify-between">
+                <ul className="flex gap-4 sm:gap-8" onClick={
+                    (event: React.SyntheticEvent) => {
+                        event.preventDefault();
+                        const target = event.target as HTMLAnchorElement;
+                        const id = target.getAttribute('href');
+                        if (id !== "#") {
+                            const element = document.getElementById(String(id?.replace('#', '')));
+                            const y = element && element.getBoundingClientRect().top + window.scrollY - 100;
+                            if (y !== null) {
+                                window.scrollTo({top: y, behavior: 'smooth'});
+                            } else {
+                                element?.scrollIntoView({
+                                    behavior: 'smooth'
+                                });
+                            }
+                        } else {
+                            window.scrollTo({
+                                top: 0,
+                                behavior: 'smooth'
+                            });
+                        }
+                    }
+                }>
+                    <li><a href="#" className="hover:underline hover:underline-offset-4">home</a></li>
+                    <li><a href="#experience" className="hover:underline hover:underline-offset-4">experience</a></li>
+                    {/* <li><a href="#education" className="hover:underline hover:underline-offset-4">education</a></li> */}
+                    <li><a href="#projects" className="hover:underline hover:underline-offset-4">projects</a></li>
+                </ul>
+                <div className="flex gap-0 sm:gap-4">
+                    <ThemeSwitch />
+                </div>
+            </nav>
         </header>
     )
 }
