script.js

// Mobile navigation toggle script for Obasphere
document.addEventListener("DOMContentLoaded", () => {
  const navToggle = document.getElementById("navToggle")
  const mainNav = document.getElementById("mainNav")
  const mobileMenu = document.getElementById("mobileMenu")
  const sidebar = document.querySelector(".sidebar")
  const sidebarBackdrop = document.querySelector(".sidebar-backdrop")
  const registerCoursesButton = document.getElementById("registerCoursesButton")
  const profileMenuButton = document.querySelector(".profile-menu")
  const profileMenu = document.getElementById("profileMenu")
  const topbarButtons = document.querySelectorAll(".topbar-dropdown-button")

  topbarButtons.forEach((button) => {
    const menu = button.nextElementSibling

    if (!menu) return

    button.addEventListener("click", (event) => {
      event.stopPropagation()
      const isOpen = button.getAttribute("aria-expanded") === "true"

      topbarButtons.forEach((otherButton) => {
        if (otherButton !== button) {
          otherButton.setAttribute("aria-expanded", "false")
          const otherMenu = otherButton.nextElementSibling
          if (otherMenu) otherMenu.hidden = true
        }
      })

      button.setAttribute("aria-expanded", String(!isOpen))
      menu.hidden = isOpen
    })
  })

  document.addEventListener("click", (event) => {
    if (!event.target.closest(".nav-menu-group")) {
      topbarButtons.forEach((button) => {
        button.setAttribute("aria-expanded", "false")
        const menu = button.nextElementSibling
        if (menu) menu.hidden = true
      })
    }
  })

  if (mobileMenu && sidebar) {
    const closeSidebar = () => {
      sidebar.classList.remove("open")
      if (sidebarBackdrop) sidebarBackdrop.classList.remove("visible")
      mobileMenu.setAttribute("aria-expanded", "false")
      mobileMenu.setAttribute("aria-label", "Open menu")
    }

    mobileMenu.addEventListener("click", () => {
      const isOpen = sidebar.classList.toggle("open")
      if (sidebarBackdrop) sidebarBackdrop.classList.toggle("visible", isOpen)
      mobileMenu.setAttribute("aria-expanded", String(isOpen))
      mobileMenu.setAttribute("aria-label", isOpen ? "Close menu" : "Open menu")
    })

    sidebar.querySelectorAll("a").forEach((link) => {
      link.addEventListener("click", closeSidebar)
    })

    if (sidebarBackdrop) sidebarBackdrop.addEventListener("click", closeSidebar)

    document.addEventListener("click", (event) => {
      if (
        sidebar.classList.contains("open") &&
        !sidebar.contains(event.target) &&
        !mobileMenu.contains(event.target)
      ) {
        closeSidebar()
      }
    })

    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && sidebar.classList.contains("open")) {
        closeSidebar()
        mobileMenu.focus()
      }
    })
  }

  if (profileMenuButton && profileMenu) {
    const closeProfileMenu = () => {
      profileMenu.hidden = true
      profileMenuButton.setAttribute("aria-expanded", "false")
      profileMenuButton.setAttribute("aria-label", "Open profile menu")
    }

    profileMenuButton.addEventListener("click", (event) => {
      event.stopPropagation()
      const isOpen = profileMenu.hidden
      profileMenu.hidden = !isOpen
      profileMenuButton.setAttribute("aria-expanded", String(isOpen))
      profileMenuButton.setAttribute(
        "aria-label",
        isOpen ? "Close profile menu" : "Open profile menu",
      )
    })

    profileMenu.querySelectorAll("a").forEach((link) => {
      link.addEventListener("click", closeProfileMenu)
    })

    document.addEventListener("click", (event) => {
      if (
        !profileMenu.hidden &&
        !profileMenu.contains(event.target) &&
        !profileMenuButton.contains(event.target)
      ) {
        closeProfileMenu()
      }
    })

    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && !profileMenu.hidden) {
        closeProfileMenu()
        profileMenuButton.focus()
      }
    })
  }

  if (registerCoursesButton) {
    registerCoursesButton.addEventListener("click", () => {
      window.location.href = "course-registration.html"
    })
  }

  if (navToggle && mainNav) {
    const toggleNav = () => {
      const isExpanded = navToggle.getAttribute("aria-expanded") === "true"
      navToggle.setAttribute("aria-expanded", String(!isExpanded))
      navToggle.classList.toggle("is-active")
      mainNav.classList.toggle("is-open")
    }

    navToggle.addEventListener("click", (e) => {
      e.stopPropagation()
      toggleNav()
    })

    // Close menu when clicking a navigation link
    mainNav.querySelectorAll("a").forEach((link) => {
      link.addEventListener("click", () => {
        if (mainNav.classList.contains("is-open")) {
          toggleNav()
        }
      })
    })

    // Close menu when clicking outside
    document.addEventListener("click", (e) => {
      if (
        mainNav.classList.contains("is-open") &&
        !mainNav.contains(e.target) &&
        !navToggle.contains(e.target)
      ) {
        toggleNav()
      }
    })

    // Close menu on Escape key press
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && mainNav.classList.contains("is-open")) {
        toggleNav()
        navToggle.focus()
      }
    })

    // Close mobile nav on window resize to desktop
    window.addEventListener("resize", () => {
      if (window.innerWidth > 768 && mainNav.classList.contains("is-open")) {
        navToggle.setAttribute("aria-expanded", "false")
        navToggle.classList.remove("is-active")
        mainNav.classList.remove("is-open")
      }

      if (window.innerWidth > 900 && sidebar.classList.contains("open")) {
        closeSidebar()
      }
    })
  }
})