add บริการ dropdown for small screen

app/components/web-header.vue

@@ -29,6 +29,22 @@
                         </UFieldGroup>
                     </div>
                 </div>
+                <div class="flex sm:hidden w-fit items-center">
+                    <UDropdownMenu
+                        size="sm"
+                        :items="siteTitleItems"
+                        :content="{
+                            align: 'end',
+                            side: 'bottom',
+                            sideOffset: 8
+                        }"
+                        :ui="{
+                            content: 'w-36'
+                        }"
+                    >
+                        <UButton size="sm" label="บริการ" icon="i-lucide-map" color="neutral" variant="outline" />
+                    </UDropdownMenu>
+                </div>
             </div>
         </div>
         <nav class="site-navbar">
@@ -47,7 +63,7 @@
                     </ul>
                 </div>
                 <div class="flex sm:hidden w-fit float-right">
-                    <UButton @click="toggleMobileNavbar" size="sm" variant="subtle" color="neutral" icon="i-lucide-menu"/>
+                    <UButton @click="toggleMobileNavbar" size="sm" variant="subtle" color="neutral" :icon="mobileNavbar ? 'i-lucide-x' : 'i-lucide-menu'"/>
                 </div>
             </div>
         </nav>