Workarounds for closing Disclosure etc. from outside the element

[TiiFuchs]

Need some help here. I'm working with Laravel+Vue+Inertia

I have a Layout with a Disclosure menu on mobile and a Menu on desktop for profile/settings/logout links when the user if authenticated.

Outside of this Layout in my main content area of the page I have InertiaJS Links, that only loads the changed content, so the Layout is persistent. This also means, when the user opened the Disclosure, clicked on a link outside of the Disclosure (means somewhere else on the page) the Disclosure stays open...

How can I close it from outside the Disclosure component? 🤔

Ideally I would like to do something like...

<script setup>
const disclosure = ref(null);

Inertia.on('navigate', (event) => {
  disclosure.close();
});
</script>

<template>
<!-- a lot of layout and somewhere a Disclosure: -->
<Disclosure ref="disclosure">
 <!-- ... -->
</Disclosure>
</template>

If there is some other way, I'd like to know how. It appears a lot of questions ask for a similar feature. So I assume that it is not yet possible. But I'd like to discuss a few workarounds so I can use HeadlessUI for the advantage of having all the ARIA features included... But currently I fear I have to implement this all by myself.