Fixed scrolling for link to home

jstamant · Jan 23, 2024 · 5d20906 · 5d20906
1 parent b5af3ee
commit 5d20906
Showing 1 changed file with 15 additions and 16 deletions.
diff --git a/components/header.js b/components/header.js
@@ -3,15 +3,14 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons'
 
-// TODO get home link added?
-/* {{- $home_link := "/" | absURL }}
- * {{- if .IsHome }}
- * {{- $home_link = "#home" }}
- * {{- end }}
- * <div class="h-full flex justify-between"> */
-
 
 const Header = () => {
+  const link = {
+    home: "/#",
+    about: "/#about",
+    projects: "/#projects",
+    contact: "/#contact",
+  }
   return (
     <header className="fixed w-full z-50 text-neutral-800 bg-white h-16 pl-4 md:pl-12 text-lg uppercase font-bold shadow-xl">
       <div className="h-full flex justify-between">
@@ -22,26 +21,26 @@ const Header = () => {
         <nav className="text-base">
           <ul className="h-full flex items-center">
             <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href="/">Home</a>
+              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href={link.home}>Home</a>
             </li>
             <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href="#about">About</a>
+              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href={link.about}>About</a>
             </li>
             <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href="#projects">Projects</a>
+              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href={link.projects}>Projects</a>
             </li>
             <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href="#contact">Contact</a>
+              <a className="px-8 py-4 transition-colors duation-300 hover:text-theme-500" href={link.contact}>Contact</a>
             </li>
             <li className="md:hidden h-full flex items-center">
               <input type="checkbox" className="peer group w-16 h-16 z-10 opacity-0 absolute right-0" />
               <a className="w-16 peer-checked:hidden"><FontAwesomeIcon icon={faBars} className="text-3xl" /></a>
               <a className="w-16 hidden peer-checked:block"><FontAwesomeIcon icon={faXmark} className="text-3xl" /></a>
               <nav className="hidden border text-base md:invisible z-0 bg-white peer-checked:block right-0 top-16 absolute flex flex-col items-center divide-y">
-                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href="/"><p>Home</p></a>
-                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href="#about"><p>About</p></a>
-                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href="#projects"><p>Projects</p></a>
-                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href="#contact"><p>Contact</p></a>
+                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.home}><p>Home</p></a>
+                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.about}><p>About</p></a>
+                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.projects}><p>Projects</p></a>
+                <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.contact}><p>Contact</p></a>
               </nav>
             </li>
           </ul>
@@ -51,4 +50,4 @@ const Header = () => {
   )
 }
 
-export default Header;
+export default Header