Sweep: fix mobile menu

[JoshKisb]

Details

the navbar should toggle hide/show when the menu button is pressed file is resources/views/components/home-navbar.blade.php

[sweep-ai[bot]]

🚀 Here's the PR! #5

💎 Sweep Pro: You have unlimited Sweep issues

Actions

• [ ] ↻ Restart Sweep

  Step 1: 🔎 Searching

  Here are the code search results. I'm now analyzing these search results to write the PR.

Relevant files (click to expand). Mentioned files will always appear here.

https://github.com/JoshKisb/genealogy-laravel/blob/17ab85c096bda81f7108204a66cf998e369f8c4a/resources/js/app.js#L1-L1

Step 2: ⌨️ Coding

resources/views/components/home-navbar.blade.php

Add mobile menu container div after closing nav tag.

--- 
+++ 
@@ -1 +1,9 @@
-    </nav>
+    </nav>
+    <div class="mobile-menu-container" x-data="{ isOpen: false }" x-show="isOpen" @click.away="isOpen = false">
+        <div class="mobile-menu-content">
+            <!-- Navigation Links -->
+            <a href="{{ route('home') }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Home</a>
+            <a href="{{ route('about') }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">About</a>
+            <a href="{{ route('contact') }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Contact</a>
+        </div>
+    </div>

resources/views/components/home-navbar.blade.php

Add menu toggle button inside nav.

--- 
+++ 
@@ -5,4 +5,17 @@
                     <a href="{{ route('about') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
                     <a href="{{ route('contact') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                 </div>
+            </div>
+
+            <div class="sm:hidden">
+                <button @click="isOpen = !isOpen" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out">
+                    <!-- Menu open: "hidden", Menu closed: "block" -->
+                    <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                    <!-- Menu open: "block", Menu closed: "hidden" -->
+                    <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
             </div>

Step 3: 🔄️ Validating

Your changes have been successfully made to the branch sweep/fix_mobile_menu. I have validated these changes using a syntax checker and a linter.

---

[!TIP] To recreate the pull request, edit the issue title or description.

This is an automated message generated by Sweep AI.