nav links and js log statements

DIVD-NL · Sep 20, 2023 · 2b37e27 · 2b37e27
1 parent f2b4a24
commit 2b37e27
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 24 deletions.
diff --git a/components/nav/MainNav.tsx b/components/nav/MainNav.tsx
@@ -6,7 +6,6 @@ import { IconSearch, IconEmail } from "../../ui/icons";
 
 import { SubNav } from "./SubNav";
 import { Lang } from "types";
-import Script from "next/script";
 
 export interface MainNavProps {
   lang: Lang;

diff --git a/components/nav/SubNav.tsx b/components/nav/SubNav.tsx
@@ -2,10 +2,10 @@ import * as React from "react";
 import cx from "classnames";
 
 import { IconExternalLink } from "../../ui/icons";
-import { Toggle } from "../../ui/toggle";
+//import { Toggle } from "../../ui/toggle";
 import { Lang } from "types";
 import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
+//import { usePathname, useRouter } from "next/navigation";
 
 export interface SubNavProps {
   lang: Lang;
@@ -41,16 +41,16 @@ export function SubNav({ lang }: SubNavProps) {
 
             <ul>
               <li>
-                <a href="#whoweare">Who we are</a>
+                <a href={`/${lang}/whoweare`}>Who we are</a>
               </li>
               <li>
-                <a href="#whatwedo">What we do</a>
+                <a href={`/${lang}/whatwedo`}>What we do</a>
               </li>
               <li>
-                <a href="#theteam">The team</a>
+                <a href={`/${lang}/team`}>The team</a>
               </li>
               <li>
-                <a href="#contact">Contact</a>
+                <a href={`/${lang}/contact`}>Contact</a>
               </li>
               <li>
                 <Link href={`/${lang}/faq`}>FAQ</Link>
@@ -61,19 +61,19 @@ export function SubNav({ lang }: SubNavProps) {
             <h3>DIVD Community</h3>
             <ul>
               <li>
-                <a href="#whoweare">Contribute</a>
+                <a href={`/${lang}/contribute`}>Contribute</a>
               </li>
               <li>
-                <a href="#whatwedo">Become a volunteer</a>
+                <a href={`/${lang}/volunteer`}>Become a volunteer</a>
               </li>
               <li>
-                <a href="#whoweare">Become a partner</a>
+                <a href={`/${lang}/parnters`}>Become a partner</a>
               </li>
               <li>
-                <a href="#whatwedo">Donate</a>
+                <a href={`/${lang}/contribute`}>Donate</a>
               </li>
               <li>
-                <a href="#whatwedo">Newsroom</a>
+                <a href={`/${lang}/newsroom`}>Newsroom</a>
               </li>
             </ul>
           </div>

diff --git a/public/js/nav.js b/public/js/nav.js
@@ -1,22 +1,26 @@
 function initNav() {
+  console.log("init nav");
   let el = document.getElementById("divd-main-nav");
-  //console.log("check", el);
+  console.log("check nav", el);
   let subNav = document.getElementById("divd-sub-nav");
-
+  console.log("check sub nav", subNav);
   let menuOpen = false;
 
+  function clickItem(e) {
+    console.log("Item clicked");
+    e.preventDefault();
+    if (menuOpen) {
+      subNav.classList.remove("active");
+      menuOpen = false;
+    } else {
+      subNav.classList.add("active");
+      menuOpen = true;
+    }
+  }
+
   let items = el.querySelectorAll(".main-nav-item");
   items.forEach((item) => {
-    item.addEventListener("click", (e) => {
-      e.preventDefault();
-      if (menuOpen) {
-        subNav.classList.remove("active");
-        menuOpen = false;
-      } else {
-        subNav.classList.add("active");
-        menuOpen = true;
-      }
-    });
+    item.addEventListener("click", clickItem);
   });
 }