From c4595c28af57b0318d65733211def219f1ede9b3 Mon Sep 17 00:00:00 2001
From: zank <zank@outlook.it>
Date: Sun, 17 Sep 2023 11:32:15 +0200
Subject: [PATCH] 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 | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index c4b2d7f..c61a325 100644
--- a/src/components/Navbar.astro
+++ b/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)}