add support for mobile navbar

app/assets/css/main.css

@@ -55,17 +55,32 @@ body {
 .navbar-nav {
     @apply md:float-left md:m-0;
 } 
+.navbar-nav-mobile {
+    @apply bg-(--ui-primary-light) border-t border-(--ui-primary);
+} 
 .navbar-nav > li {
     float: left;
     display: flex;
 }
-.navbar-nav > li > a {
+.navbar-nav-mobile > li {
+    display: flex;
+    flex-direction: column;
+}
+.navbar-nav > li > a,
+.navbar-nav-mobile > li > a {
     padding: 10.5px 14px;
 }
-.navbar-nav > li > a.router-link-active, .navbar-nav > li > a.router-link-active:hover {
+.navbar-nav-mobile > li > a {
+    @apply text-(--ui-primary-container);
+}
+.navbar-nav > li > a.router-link-active,
+.navbar-nav > li > a.router-link-active:hover,
+.navbar-nav-mobile > li > a.router-link-active,
+.navbar-nav-mobile > li > a.router-link-active:hover {
     @apply bg-linear-[to_bottom,rgba(0,0,0,0.3)_10%,rgba(0,0,0,0)_100%];
 }
-.navbar-nav > li > a:hover {
+.navbar-nav > li > a:hover,
+.navbar-nav-mobile > li > a:hover {
     @apply bg-linear-[to_bottom,rgba(255,255,255,0)_0%,rgba(255,255,255,0.3)_10%,rgba(255,255,255,0)_100%];
 }
 .site-title {
@@ -83,6 +98,9 @@ body {
     height: auto;
     @apply bg-linear-[to_bottom,var(--ui-primary)_0%,var(--ui-primary-light)_90%] text-white;
 }
+/* .site-navbar > .container  {
+    @apply items-end;
+} */
 .hero-section {
     @apply py-16 drop-shadow-md bg-(--ui-primary-container) text-(--ui-on-primary-container) bg-cover bg-center;
 }
@@ -90,11 +108,11 @@ body {
     @apply my-4;
 }
 .hero-section > .container > .title {
-    @apply text-4xl font-bold my-4;
+    @apply text-2xl md:text-3xl lg:text-4xl font-bold my-4;
     line-height: 1.4em;
 }
 .hero-section > .container > .subtitle {
-    @apply text-xl my-4;
+    @apply text-lg md:text-xl my-4;
     line-height: 1.4em;
 }
 .page-section {
@@ -107,18 +125,18 @@ body {
     @apply my-[0.75rem];
 }
 .page-section.page-section-alt {
-    @apply my-0;
+    @apply my-16 md:my-0;
 }
 .page-section.page-section-alt > .container {
-    @apply my-0 flex justify-between items-center;
+    @apply my-0 flex flex-col md:flex-row justify-between items-center;
 }
 .page-section.page-section-alt > .container > .section {
-    @apply mb-4;
+    @apply md:mb-4;
 }
 .page-section.page-section-alt > .container > .section-img {
-    @apply w-[45%];
+    @apply w-full md:w-[45%];
     img {
-        @apply my-16;
+        @apply md:my-16;
     }
 }
 .footer {

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>