add nps-6

src/content/prove/nps-2.mdx

@@ -55,7 +55,7 @@ Remember to run your new function as well!
 
 Next we should make a list of the other things we need to do:
 
-1. Set the information in the `intro` section. This will be the park full name, and the description from our data.
+1. Set the information in the `intro` section. This will be the park full name, and the description from our data. You can do this in much the same way we inserted data in the header.
 2. Create a template function that will create a component consisting of an image, headline, and paragraph. If you check out the real [Yellowstone site](https://www.nps.gov/yell/index.htm) you will notice that the image and headline are also links. You can call this function `mediaCardTemplate(info)`
 3. We know that we want to create certain blocks, but they are not directly represented in our data. We could just hard code everything, but what if we want to change the content sections later? We should represent the sections in data...to make it easier to change later if necessary. We will create a new array called `parkInfoLinks` and add the following objects to it:
 

src/content/prove/nps-5.mdx

@@ -10,12 +10,12 @@ Complete the following assignment individually. Feel free however to work togeth
 
 ## **01** Review the provided screenshots
 
-Review the following screenshots to understand how the global navigation works for the page. It looks different for the mobile and wide views. Again for this part we will be building a simplified version.  
+Review the following screenshot to see where we will be when we finish this activity.
 
 import Figure from "../../components/Figure.astro";
 
-<Figure src="/images/nps-conditions-lg.webp" alt="Part 3 finished large screen">Part 3 Finish point large screen</Figure>
-<Figure src="/images/nps-conditions-sm.webp" alt="Part 3 finished small screen">Part 3 Finish point small screen</Figure>
+<Figure src="/images/nps-menu-simple-open.webp" alt="Menu simple open state">Menu Simple open state</Figure>
+
 
 Here are a few things in particular to note:
 
@@ -200,18 +200,25 @@ function enableNavigation() {
 
   // when the main menu button is clicked:
   menuButton.addEventListener("click", (ev) => {
+    let target = ev.target;
     // toggle the show class on the global-nav
+
+    // check to see if target is the button or something inside the button
 
     // check to see if we just opened or closed the menu
 
-      // if we opened it then set the aria-expanded attribute to true
+      // if we opened it then set the aria-expanded attribute on the button to true
 
-      // if we closed it then set the aria-expanded attribute to false
+      // if we closed it then set the aria-expanded attribute on the button to false
 
   });
 }
 ```
 
+>Caution!
+>
+>When we click on the button we might also be clicking on the text inside the button!  In that case `ev.target` might not point to what we think it does. Before you try to set the `aria-expanded` attribute you shuold check to make sure we have the right target.  Each element has a property called `tagName` that you can use to check. We are looking for a "BUTTON". If `ev.target` isn't a button, it means we clicked on something insdie the button and we can use `Element.closest()` to get back up to the button element we were expecting.
+
 Finally we need to make sure that the text on the button changes as well.
 
 For the button text we could add/remove classes to the elements, but there is actually a better way. We can take advantage of the fact that we are setting `aria-expanded` based on the menu state, and that the elements we want to show and hide are children of the button. We can use a [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) to write the CSS to swap our labels.
@@ -240,18 +247,23 @@ function enableNavigation() {
 
   // when the main menu button is clicked:
   menuButton.addEventListener("click", (ev) => {
-    // toggle the show class on the global-nav
-    document.querySelector(".global-nav").classList.toggle("show");
-    // check to see if we just opened or closed the menu
-    if (document.querySelector(".global-nav").classList.contains("show")) {
-      // if we opened it then set the aria-expanded attribute to true
-      menuButton.setAttribute("aria-expanded", true);
-    } else {
-      // if we closed it then set the aria-expanded attribute to false
-      menuButton.setAttribute("aria-expanded", false);
-    }
-
-    console.log("toggle");
+    let target = ev.target;
+  // toggle the show class on the global-nav
+  document.querySelector(".global-nav").classList.toggle("show");
+  // check to see if ev.target is the button or something inside the button
+  if (target.tagName != "BUTTON") {
+    target = target.closest("button");
+  }
+  // check to see if we just opened or closed the menu
+  if (document.querySelector(".global-nav").classList.contains("show")) {
+    // if we opened it then set the aria-expanded attribute to true
+    target.setAttribute("aria-expanded", true);
+  } else {
+    // if we closed it then set the aria-expanded attribute to false
+    target.setAttribute("aria-expanded", false);
+  }
+
+  console.log("toggle");
   });
 }
 ```