fix: docs

Author: binaryk

docs-v3/components/SearchInput.vue

@@ -2,7 +2,9 @@
   <div class="relative w-full lg:max-w-md">
     <button
       @click="openSearchModal"
-      class="flex items-center w-full px-3 py-2 text-left border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors group"
+      @touchstart="handleTouchStart"
+      class="flex items-center w-full px-3 py-2 text-left border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors group cursor-pointer"
+      style="-webkit-tap-highlight-color: transparent;"
     >
       <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -37,4 +39,11 @@ const isMac = computed(() => {
 const openSearchModal = () => {
   openModal()
 }
+
+// Handle touch start for iOS devices
+const handleTouchStart = (event: TouchEvent) => {
+  // Prevent default behavior and ensure the click event fires
+  event.preventDefault()
+  openSearchModal()
+}
 </script>

docs-v3/components/TheSidebar.vue

@@ -51,11 +51,16 @@
       v-if="isMobileMenuOpen"
       class="fixed inset-0 z-50 lg:hidden"
       @click="toggleMobileMenu"
+      @touchmove.prevent
     >
       <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
 
-      <nav class="relative max-w-xs w-full bg-white dark:bg-gray-900 h-full shadow-xl">
-        <div class="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700">
+      <nav 
+        class="relative max-w-xs w-full bg-white dark:bg-gray-900 h-full shadow-xl flex flex-col"
+        @click.stop
+        @touchmove.stop
+      >
+        <div class="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
           <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Navigation</h2>
           <button
             @click.stop="toggleMobileMenu"
@@ -67,7 +72,7 @@
           </button>
         </div>
 
-        <div class="px-4 py-6 overflow-y-auto">
+        <div class="flex-1 overflow-y-auto px-4 py-6" style="-webkit-overflow-scrolling: touch;">
           <div class="space-y-6">
             <div 
               v-for="section in navigationSections" 
@@ -122,6 +127,23 @@ const { navigationSections } = useNavigation()
 const isMobileMenuOpen = inject('isMobileMenuOpen', ref(false))
 const toggleMobileMenu = inject('toggleMobileMenu', () => {})
 
+// Handle body scroll locking for mobile menu
+watch(isMobileMenuOpen, (isOpen) => {
+  if (process.client) {
+    if (isOpen) {
+      // Lock body scroll when mobile menu is open
+      document.body.style.overflow = 'hidden'
+      document.body.style.position = 'fixed'
+      document.body.style.width = '100%'
+    } else {
+      // Restore body scroll when mobile menu is closed
+      document.body.style.overflow = ''
+      document.body.style.position = ''
+      document.body.style.width = ''
+    }
+  }
+})
+
 // Collapsible sections state
 const collapsedSections = ref<Set<string>>(new Set())
 

docs-v3/content/index.md

@@ -29,7 +29,4 @@ You can find a playground in the [Restify Demo GitHub repository](https://github
 
 ## Videos
 
-You can find the [full course here](https://www.binarcode.com/learn/restify) with many useful features and insights on how Laravel Restify works.
-
-<iframe src="https://player.vimeo.com/video/501764861" width="640" height="480">
-</iframe>
+You can find the [full course here](https://www.binarcode.com/learn/restify) with many useful features and insights on how Laravel Restify works. Note that the videos are from a previous version of Restify and may not reflect the latest features.