update navbar, h5 global style

src/components/Header.astro

@@ -6,12 +6,13 @@ import Hero from './Hero.astro';
 <header>
   <NavBar
     links={[
-      { name: 'About', url: '#about' },
-      { name: 'Non Profits', url: '#nonprofits' },
-      { name: 'Schedule', url: '#schedule' },
+      { name: 'ABOUT', url: '#about' },
+      { name: 'NONPROFITS', url: '#nonprofits' },
+      { name: 'SCHEDULE', url: '#schedule' },
       { name: 'FAQ', url: '#faq' },
+      { name: 'CONTACT', url: '#contact' },
     ]}
-    client:media="(max-width: 767px)"
+    client:load
   />
   <Hero />
 </header>

src/components/Navbar/index.tsx

@@ -1,6 +1,11 @@
-import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+// a lot of code is commented in case mobile view
+// requires an animated menu
+
+// import { useState } from 'react';
+// import { motion, AnimatePresence } from 'framer-motion';
 import styles from './style.module.scss';
+import logo from '../../graphics/tentative logo.svg';
+import { useEffect, useRef } from 'react';
 
 interface Link {
   name: string;
@@ -12,15 +17,39 @@ interface Props {
 }
 
 export default function NavBar({ links }: Props) {
-  const [menuVisible, setMenuVisible] = useState(false);
+  const navbarRef = useRef<HTMLElement>(null);
+  // const [menuVisible, setMenuVisible] = useState(false);
+
+  useEffect(() => {
+    const checkHeight = () => {
+      if (navbarRef === null) return;
+      if (window.scrollY > 0) navbarRef.current?.classList.add(styles.scrolled);
+      else navbarRef.current?.classList.remove(styles.scrolled);
+    };
+
+    checkHeight();
+
+    const scrollListener = window.addEventListener('scroll', () => {
+      checkHeight();
+    });
+
+    return scrollListener;
+  }, []);
+
+  const backToTop = () => {
+    window.history.replaceState({}, '', '/'); // clear id in url
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  };
 
   return (
-    <nav className={styles.nav}>
+    <nav ref={navbarRef}>
       {/* logo */}
-      <div className={styles.logo}></div>
+      <button className={styles.logo} onClick={backToTop}>
+        <img src={logo.src} alt="logo" />
+      </button>
 
       {/* menu toggle */}
-      <button
+      {/* <button
         className={styles.button}
         onClick={() => setMenuVisible(!menuVisible)}
       >
@@ -35,21 +64,21 @@ export default function NavBar({ links }: Props) {
           <rect x="0" y="15" width="30" height="2" fill="black" />
           <rect x="0" y="22" width="30" height="2" fill="black" />
         </svg>
-      </button>
+      </button> */}
 
       {/* backdrop */}
-      <div className={styles.backdrop}></div>
+      {/* <div className={styles.backdrop}></div> */}
 
       {/* links */}
       <section className={styles.links}>
         {links.map(l => (
           <a href={l.url} key={l.url}>
-            {l.name}
+            <h5>{l.name}</h5>
           </a>
         ))}
       </section>
 
-      <AnimatePresence>
+      {/* <AnimatePresence>
         {menuVisible && (
           <motion.section
             className={styles.mobileLinks}
@@ -64,7 +93,7 @@ export default function NavBar({ links }: Props) {
             ))}
           </motion.section>
         )}
-      </AnimatePresence>
+      </AnimatePresence> */}
     </nav>
   );
 }

src/components/Navbar/style.module.scss

@@ -1,24 +1,31 @@
 @use '../../styles/colors';
 @use '../../styles/breakpoints';
 
-.nav {
+nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
-  background: colors.$background;
+  position: fixed;
   width: 100%;
   height: 3.5rem;
-  padding: 0 2rem;
+  padding: 0 4.5rem;
   z-index: 10;
+  background-color: colors.$background;
+  transition: all 200ms ease-in-out;
+
+  &.scrolled {
+    padding-top: 5px;
+    background-color: white;
+  }
 }
 
 .logo {
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 99999px;
-  background: colors.$accent;
+  height: 100%;
   z-index: 10;
+
+  & > img {
+    height: 100%;
+  }
 }
 
 .button {
@@ -65,6 +72,10 @@
   }
 }
 
+.links a {
+  color: colors.$text;
+}
+
 .mobileLinks {
   position: absolute;
   top: 100%;

src/styles/_global.scss

@@ -42,6 +42,7 @@ h4 {
 h5 {
   font-family: fonts.$mono;
   font-size: 0.875rem;
+  font-weight: 400;
 }
 
 p {