Refactor Navbar component to dynamically update open state on window …

…resize

The Navbar component has been refactored to include a new `x-data` attribute that initializes an object with properties for `open` and `windowWidth`. The `init()` function is called on component initialization and sets the initial value of `open` based on the window width. Additionally, a `$watch` method is used to update the value of `open` whenever the window width changes. A resize event listener has also been added to update the value of `windowWidth` when the window is resized. This ensures that the Navbar's open state is dynamically updated based on the window size.

src/components/Navbar.astro

@@ -9,7 +9,21 @@ const url = Astro.url;
 ---
 
 <div
-	x-data="{open: window.innerWidth < 768 ? false : true}"
+	x-data={`{
+				open: window.innerWidth < 768 ? false : true,
+				windowWidth: window.innerWidth,
+				init() {
+					this.$watch('windowWidth', value => {
+						this.open = value < 768 ? false : true;
+					});
+					window.addEventListener('resize', () => {
+						this.$nextTick(() => {
+							this.windowWidth = window.innerWidth;
+						});
+					});
+				}
+			}`}
+	x-init="init()"
 	class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8 z-10 md:pt-2 relative">
 	<div class="p-4 flex flex-row items-center justify-between">
 		<a	href={localizePath("/", url)}