big ol pile

js/nav.js

@@ -0,0 +1,57 @@
+var navList = document.querySelector("header nav ul");
+var navButton = document.querySelector("header nav button");
+
+const navItems = navList.querySelectorAll("a");
+const firstItem = navItems[0];
+const lastItem = navItems[navItems.length - 1];
+
+const openMenu = function() {
+	navList.ariaHidden = "false";
+	navButton.ariaExpanded = "true";
+}
+
+const closeMenu = function() {
+	navList.ariaHidden = "true";
+	navButton.ariaExpanded = "false";
+}
+
+if (window.innerWidth <= 650) {
+	navList.ariaHidden = "true";
+}
+
+/* basic open and close */
+navButton.addEventListener("click", (e) => {
+	if (navButton.ariaExpanded === "true") closeMenu();
+	else openMenu();
+});
+
+navButton.addEventListener("keydown", (event) => {
+	if (event.key === "Enter" || event.key === " ") { // Space or Enter key
+		event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
+		if (navButton.ariaExpanded === "false") openMenu();
+		else closeMenu();
+	} else if (event.key === "Tab" && event.shiftKey) closeMenu();
+});
+
+/* tab out of menu in either direction */
+firstItem.addEventListener("keydown", (e) => {
+	if (event.key === "Tab" && event.shiftKey) closeMenu();
+});
+
+lastItem.addEventListener("keydown", (e) => {
+	if (event.key === "Tab" && !event.shiftKey) closeMenu();
+});
+
+/* escape/click away from menu */
+document.addEventListener("keydown", (event) => {
+	if (event.key === "Escape" && navButton.ariaExpanded === "true") {
+		closeMenu();
+		navButton.focus();
+	}
+});
+
+window.addEventListener("click", (e) => {
+	if (navButton.ariaExpanded === "true" &&
+			!event.target.matches("header nav ul") &&
+			!event.target.matches("header nav button")) closeMenu();
+})