Navigation object can't be instantiated like this. Try changing to, e.g.:
<script>
navigation.navigate(document.getElementById("navigation"), {
overlayColor: "#31A6FF",
});
</script>
#JS integration, while migrating to Astro.js
spark cedar
BTW, Navigation api is experimental with limited browser support: https://developer.mozilla.org/en-US/docs/Web/API/Navigation
So you might want to add safety check:
<script>
if (globalThis.navigation) {
navigation.navigate(document.getElementById("navigation"), {
overlayColor: "#31A6FF",
});
}
</script>
hoary ingot
Umm, I'm actually migrating a html/css website to astro. I dont think the html website has used the navigation api
this the navigation.js file
that is used in the html website
it is used in accordance to the
"<script>
var navigation = new Navigation(document.getElementById("navigation"), {
overlayColor: "#31A6FF",
});
</script>"
hoary ingot
pluginName gives me an error as well
hoary ingot
pluginName gives me an error as well
when i import this into my astro component
spark cedar
I see… there is probably issue with importing some module with the Navigation object, but I am no expert on this. I use something similar once before, and it was rather simple:
<script>
import { disablePageScroll, enablePageScroll } from "scroll-lock";
//...
</script>
But your code might be vastly different and the JS ecosystem is really wild, so honestly, I don't know.
hoary ingot
thankyou for the reply! Ill surely look into this
spark cedar
Just an afterthought: the error seems to be caused by the fact you are accidentaly accessing global window.Navigation instead of the custom object the original legacy code. This might mean the original Navigation is not accessible in the scope (not imported?)
hoary ingot
So you're suggesting that I import the Navigation object into the js file?
