fix: nable multiple navbars on a page

[SalahAdDin]

Intro

Following this PR, we wanted to propose an alternative for it.

Description

Here is the breakdown of why Astronav.astro is structurally necessary:

1. The "Desktop Dropdown" Problem

The script currently handles Dropdown toggles as well as the mobile menu.

• Dropdowns are primarily used on Desktop screens.
• MenuIcon (the hamburger button) is typically hidden or not rendered at all on Desktop.
• If we move the logic into MenuIcon , and the user conditionally renders it (e.g., {isMobile && <MenuIcon />}), your Dropdowns will stop working on desktop because the script won't be present.

2. Scoping & "Islands" (The Fix We Just Made)

We just established that we need a "root" element to isolate multiple navbars on the same page.

• Astronav.astro provides this boundary automatically via the <nav class="astronav-toggle-root"> wrapper.
• If you remove Astronav.astro, the user would have to manually add a wrapper div with a specific class to every navbar for the code to work. This degrades the Developer Experience (DX) and makes the library more error-prone to use.

3. Separation of Concerns

• MenuIcon should just be a Button (UI).
• Astronav acts as the Controller (Logic).
  It is cleaner to have a dedicated controller component orchestrate the behavior of the children (Menu, Dropdowns, Sticky behaviors) rather than stuffing global navigation logic into a tiny icon component.

Correction on closeOnClick

You are absolutely right that closeOnClick belongs on the button. In fact, it is already implemented that way!

• Astronav.astro does not accept a closeOnClick prop.
• MenuIcon.astro does accept it and renders it as a data attribute (data-closeOnClick).
• The script in Astronav looks for that attribute on the button to decide whether to enable the behavior.