Persistent div on all pages

Hello,

I’m creating a website where the navigation will be animated and moved by the user. I would like this small navigation element (let’s say it consists of a simple div) to maintain its state across all pages, similar to this exemple where the small bubble stays in place even when navigating to another page.

I’ve considered several options for achieving this:

  • Since the website could become quite heavy and content management is necessary, I prefer to avoid using a JSON file to dynamically update the content on the page.
  • While I’m not entirely familiar with how Vue components work, this could potentially be a solution. (I know kirby 4 supports vue components, so I feel it’s the good path to follow, even though I’m lacking a lot here.)
  • I noticed that the example website uses https://swup.js.org/ to manage page loads and reloads. This might also be a viable solution.
  • Another option could involve using a JavaScript script to store the latest state of the navigation div and apply that state to the updated navigation upon each reload.

Let me know.
Thanks!

Cookies, WebStorage (LocalStorage, SessionStorage) …