add support for mobile navbar

app/components/web-header.vue

@@ -33,9 +33,9 @@
         </div>
         <nav class="site-navbar">
             <div class="container">
-                <div class="hidden sm:flex">
+                <div class="hidden sm:flex w-full">
                     <ul class="nav navbar-nav">
-                        <li class="nav-link">
+                        <li class="nav-link" @click="toggleMobileNavbar">
                             <NuxtLink href="/">หน้าหลัก</NuxtLink>
                         </li>
                         <li class="nav-link">
@@ -46,19 +46,22 @@
                         </li>
                     </ul>
                 </div>
+                <div class="flex sm:hidden w-fit float-right">
+                    <UButton @click="toggleMobileNavbar" size="sm" variant="subtle" color="neutral" icon="i-lucide-menu"/>
+                </div>
             </div>
         </nav>
         <nav v-if="mobileNavbar">
-            <div class="hidden sm:flex">
-                <ul class="nav navbar-nav">
+            <div class="flex flex-col">
+                <ul class="nav navbar-nav-mobile">
                     <li class="nav-link">
-                        <NuxtLinkLocale href="/">หน้าหลัก</NuxtLinkLocale>
+                        <NuxtLink href="/">หน้าหลัก</NuxtLink>
                     </li>
                     <li class="nav-link">
-                        <NuxtLinkLocale href="/about">เกี่ยวกับ</NuxtLinkLocale>
+                        <NuxtLink href="/about">เกี่ยวกับ</NuxtLink>
                     </li>
                     <li class="nav-link">
-                        <NuxtLinkLocale href="/contact">ติดต่อ</NuxtLinkLocale>
+                        <NuxtLink href="/contact">ติดต่อ</NuxtLink>
                     </li>
                 </ul>
             </div>
@@ -94,7 +97,8 @@ const mobileNavbar = ref(false);
 function toggleMobileNavbar() {
     mobileNavbar.value = !mobileNavbar.value
 }
-function closeMobileNavbar() {
-    mobileNavbar.value = false
-}
+const route = useRoute()
+watch(() => route.fullPath, () => {
+  mobileNavbar.value = false
+})
 </script>