Merge pull request #13 from xchux/fix/bugs

Fix/bugs

Author: xchux

components/navbar.tsx

@@ -1,12 +1,34 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 
 import Link from "next/link";
 
 import { translatoinSchemaType } from "@/types/page";
 
+const scrollToSection = (id: string, offset: number = 64) => {
+    const target = document.querySelector(id);
+    if (target) {
+        const top = target.getBoundingClientRect().top + window.scrollY - offset;
+        window.scrollTo({ top, behavior: "smooth" });
+    }
+};
+
 const Navbar = (transation: translatoinSchemaType) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isLangOpen, setIsLangOpen] = useState(false);
+    const langDropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (langDropdownRef.current && !langDropdownRef.current.contains(event.target as Node)) {
+                setIsLangOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
 
     return (
         <div className="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm">
@@ -35,10 +57,19 @@ const Navbar = (transation: translatoinSchemaType) => {
                 <div id="hs-navbar-header-floating" className={`${isOpen ? "block" : "hidden"} md:block transition-all duration-300 basis-full grow md:block`} aria-labelledby="hs-navbar-header-floating-collapse">
                     <div className="flex flex-col md:flex-row md:items-center md:justify-end gap-2 md:gap-3 mt-3 md:mt-0 py-2 md:py-0 md:ps-7">
                         <Link className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-gray-800 font-medium text-gray-800 focus:outline-none dark:border-neutral-200 dark:text-neutral-200" href="#" aria-current="page">{transation.data.profile.title}</Link>
-                        <Link className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" href="#work-experience">{transation.data.workExperience.title}</Link>
-                        <Link className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" href="#education">{transation.data.education.title}</Link>
-                        <Link className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" href="#skills">{transation.data.skills.title}</Link>
-                        <div className="relative">
+                        <Link className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" onClick={(e) => {
+                            e.preventDefault();
+                            scrollToSection("#work-experience");
+                        }} href="#work-experience">{transation.data.workExperience.title}</Link>
+                        <Link className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" onClick={(e) => {
+                            e.preventDefault();
+                            scrollToSection("#education");
+                        }} href="#education">{transation.data.education.title}</Link>
+                        <Link className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" onClick={(e) => {
+                            e.preventDefault();
+                            scrollToSection("#skills");
+                        }} href="#skills">{transation.data.skills.title}</Link>
+                        <div className="relative" ref={langDropdownRef}>
                             <button className="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200 flex items-center" onClick={() => setIsLangOpen(!isLangOpen)}>
                                 {transation.data.language.title}
                                 <svg className={`ml-1 w-4 h-4 transition-transform ${isLangOpen ? 'rotate-180' : ''}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

out/404.html

@@ -19,9 +19,3 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
-
-h2 {
-    position: relative;
-    padding-top: 5rem; /* Adjust this value to match the height of your navbar */
-    margin-top: -5rem; /* Same value as padding-top */
-}