pt1

src/app/components/Navbar.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import styles from "./Navbar.module.css";
@@ -8,6 +8,7 @@ import logo from "../assets/logo.svg";
 import menu from "../assets/menu.svg";
 import close from "../assets/close.svg";
 import { usePathname } from "next/navigation";
+// import { motion } from "motion/react"
 
 export default function Navbar() {
   const pathname = usePathname();
@@ -22,9 +23,31 @@ export default function Navbar() {
     setDropdownActive(!isDropdownActive);
   }
 
+  function useOutsideAlerter(ref) {
+    useEffect(() => {
+      /**
+       * Alert if clicked on outside of element
+       */
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setActive(true);
+        }
+      }
+      // Bind the event listener
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [ref]);
+  }
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+
   return (
     <nav className={`${styles.navbar} shadow`}>
-      <div className={`${styles.container} container`}>
+      <div className={`${styles.container} container`} ref={wrapperRef}>
         <div className={styles.header}>
           <div>
             <Link href="/" className={styles.logo}>
@@ -57,7 +80,7 @@ export default function Navbar() {
           <li
             className={`
               ${styles.dropdown} 
-              ${isDropdownActive ? styles.dropdownActive : ""}
+              ${isDropdownActive && !isActive ? styles.dropdownActive : ""}
             `}
           >
             <a

src/app/components/Navbar.module.css

@@ -16,8 +16,7 @@
 }
 
 /* Position nav items correctly */
-.navbar .container li,
-.dropdownTitle {
+.navbar .container li {
   padding-left: 0.75em;
   padding-right: 0.75em;
 }
@@ -92,8 +91,8 @@
 
   .links li,
   .dropdownTitle {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     margin-bottom: 0.5rem;
     border-radius: 0.5em;
   }
@@ -135,6 +134,11 @@
     align-items: center;
     justify-content: space-between;
   }
+
+  .dropdownMenu {
+    position: absolute;
+    display: none;
+  }
 }
 
 .header {
@@ -156,9 +160,18 @@
   font-family: var(--font-geist-mono);
 }
 
+.dropdown {
+  padding: 0 !important;
+}
+
 
 .dropdown a {
   cursor: pointer;
+  margin-bottom: 0;
+}
+
+.dropdown li {
+  margin-bottom: 0;
 }
 
 .dropdownMenu li:last-of-type {
@@ -175,31 +188,18 @@
   margin: 0 !important;
 }
 
-.dropdownMenu {
-  display: none;
-}
-
 .dropdownActive {
   background-color: #f1f1f1;
-  transition: all 0.3s ease-out;
+}
+
+.dropdownMenu {
+  display: none;
 }
 
 .dropdownActive .dropdownMenu {
   display: block;
 }
 
-/*
-.dropdownTitle {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  background-color: var(--accent);
-  border-radius: 0.5em;
-  margin-bottom: 0.5rem;
-}
-  */
-
 .dropdown:not(.dropdownActive) .dropdownTitle {
   margin-bottom: 0;
 }

src/app/globals.css

@@ -257,7 +257,6 @@ textarea {
 
 h1,
 h2 {
-  font-family: var(--font-geist-mono);
   font-weight: bold;
 }
 

src/app/layout.js

@@ -7,6 +7,7 @@ import ChatwootWidget from "./components/ChatwootWidget"
 // Add spyware
 import { Analytics } from "@vercel/analytics/react"
 import { GoogleAnalytics } from '@next/third-parties/google'
+import { SpeedInsights } from "@vercel/speed-insights/next"
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -33,6 +34,7 @@ export default function RootLayout({ children }) {
         {children}
         <Footer />
         <Analytics />
+        <SpeedInsights />
         <GoogleAnalytics gaId="G-TN7ZL1Y4CC" />
       </body>
     </html>

src/app/page.js

@@ -161,7 +161,7 @@ export default function Home() {
           <div className={styles.map}>
             <GoogleMapsEmbed
               apiKey="AIzaSyDbgQY55TQY5CefsCUwKbc8RfoOUe8U5gY"
-              height="100%"
+              height="500px"
               width="100%"
               mode="place"
               q="place_id:ChIJz0ZoDYhADW0R0TDgWoWMq0M"

src/app/page.module.css

@@ -46,7 +46,6 @@
 }
 
 .map {
-  height: 50em;
   width: 100%;
   margin-bottom: 10em;
 }