Add Google spyware, improve map

src/app/components/Navbar.js

@@ -12,10 +12,14 @@ import { usePathname } from "next/navigation";
 export default function Navbar() {
   const pathname = usePathname();
   const [isActive, setActive] = useState("false");
+  const [isDropdownActive, setDropdownActive] = useState(false);
 
   function handleToggle() {
     setActive(!isActive);
-    console.log("asdhjiuashd");
+  }
+
+  function handleDropdownToggle() {
+    setDropdownActive(!isDropdownActive);
   }
 
   return (
@@ -50,17 +54,32 @@ export default function Navbar() {
               Home
             </Link>
           </li>
-          <li>
-            <Link
-              href="/services"
-              className={`link ${
-                pathname === "/services" ? styles.active : ""
-              }`}
+          <li
+            className={`
+              ${styles.dropdown} 
+              ${isDropdownActive ? styles.dropdownActive : ""}
+            `}
+          >
+            <a
+              className={`${styles.dropdownTitle} 
+              ${pathname === "/services" ? styles.active : ""}`}
+              onClick={handleDropdownToggle}
             >
               Services
-            </Link>
+            </a>
+            <ul className={styles.dropdownMenu}>
+              <li>
+                <Link href="/services/web-development">Web Development</Link>
+              </li>
+              <li>
+                <Link href="/services/it-support">IT Support</Link>
+              </li>
+              <li>
+                <Link href="/services/consulting">Consulting</Link>
+              </li>
+            </ul>
           </li>
-          <li>
+          <li className={styles.highlight}>
             <Link
               href="/contact"
               className={`link ${pathname === "/contact" ? styles.active : ""}`}

src/app/components/Navbar.module.css

@@ -16,7 +16,8 @@
 }
 
 /* Position nav items correctly */
-.navbar .container li {
+.navbar .container li,
+.dropdownTitle {
   padding-left: 0.75em;
   padding-right: 0.75em;
 }
@@ -49,7 +50,7 @@
   gap: 0.25em;
 }
 
-.navbar .container li:last-child {
+.highlight {
   color: white;
   background-color: var(--accent);
 }
@@ -89,9 +90,10 @@
     padding-right: 20px;
   }
 
-  .links li {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+  .links li,
+  .dropdownTitle {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
     margin-bottom: 0.5rem;
     border-radius: 0.5em;
   }
@@ -153,3 +155,51 @@
   margin-bottom: 0;
   font-family: var(--font-geist-mono);
 }
+
+
+.dropdown a {
+  cursor: pointer;
+}
+
+.dropdownMenu li:last-of-type {
+  margin-bottom: 0;
+}
+
+.dropdown:not(.dropdownActive) {
+  padding: 0 !important;
+  background-color: #fff;
+  transition: all 0.3s ease-out;
+}
+
+.dropdown:not(.dropdownActive) li {
+  margin: 0 !important;
+}
+
+.dropdownMenu {
+  display: none;
+}
+
+.dropdownActive {
+  background-color: #f1f1f1;
+  transition: all 0.3s ease-out;
+}
+
+.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/layout.js

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

src/app/page.js

@@ -5,6 +5,7 @@ import Button from "./components/Button";
 import Cards from "./components/Cards";
 import Card from "./components/Card";
 import Link from "next/link";
+import { GoogleMapsEmbed } from "@next/third-parties/google";
 
 export default function Home() {
   return (
@@ -158,13 +159,13 @@ export default function Home() {
         </section>
         <section className="container">
           <div className={styles.map}>
-            <iframe
-              src="https://storage.googleapis.com/maps-solutions-pks9pyo9nq/commutes/3v9s/commutes.html"
-              width="100%"
+            <GoogleMapsEmbed
+              apiKey="AIzaSyDbgQY55TQY5CefsCUwKbc8RfoOUe8U5gY"
               height="100%"
-              style={{ border: 0 }}
-              loading="lazy"
-            ></iframe>
+              width="100%"
+              mode="place"
+              q="place_id:ChIJz0ZoDYhADW0R0TDgWoWMq0M"
+            />
           </div>
         </section>
       </main>