#How to update a state without refreshing the entire page in Astro?

10 messages · Page 1 of 1 (latest)

modest adder
#

I am experiencing difficulty maintaining the state of an open and closed menu. I am using DaisyUI and TailwindCSS. In the Astro <script> tag, I am receiving a toggle event. However, I am unable to manage the state of isOpen without refreshing the entire page. How can I achieve this?

I have attached a TypeScript file containing the code.
FYI: I'm using Astro + Svelte

main lynx
#

Astro runs on the server, not in the client like you might be used to with frontend frameworks

#

As such, it's not possible to update isOpen at runtime and for the page to change, the HTML has already been generated that way

#

What you should do instead is manage isOpen exclusively in your script tag

modest adder
#

I tried to manage it in script tag in astro file, but what happened when I click on navigation item then that script will be not executing, it's executing only once

delicate blaze
#

Are you using is:inline on your script tag? If not, the scripts are only executed once. If you are using view transitions, you might also need to add data-astro-rerun to re-execute the script after every transition.

You might want to take a look at the opting out of processing and script re-execution from the docs

wispy canopy
#

If you are already using svelte, why not just make the menu an island and handle it all with svelte?

modest adder
modest adder