From 29ee714df7a6c43acf15566aba31e0454f33bc20 Mon Sep 17 00:00:00 2001
From: Kevin Sivic <kevin.sivic@gmail.com>
Date: Mon, 1 Dec 2025 17:18:36 -0500
Subject: [PATCH] Add responsive mobile navigation with hamburger menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Desktop: horizontal navigation menu as before
- Mobile: hamburger dropdown menu with theme toggle visible
- Breakpoint at md (768px)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 lib/localspot_web/components/layouts.ex | 45 ++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/lib/localspot_web/components/layouts.ex b/lib/localspot_web/components/layouts.ex
index 9017217..ee20102 100644
--- a/lib/localspot_web/components/layouts.ex
+++ b/lib/localspot_web/components/layouts.ex
@@ -42,7 +42,9 @@ defmodule LocalspotWeb.Layouts do
           <span class="font-bold">LocalSpot</span>
         </a>
       </div>
-      <div class="flex-none">
+
+      <%!-- Desktop navigation --%>
+      <div class="hidden md:flex flex-none">
         <ul class="menu menu-horizontal px-1 items-center gap-1">
           <li>
             <a href={~p"/businesses"} class="btn btn-ghost btn-sm">
@@ -69,6 +71,41 @@ defmodule LocalspotWeb.Layouts do
           </li>
         </ul>
       </div>
+
+      <%!-- Mobile navigation --%>
+      <div class="flex md:hidden flex-none items-center gap-2">
+        <.theme_toggle />
+        <div class="dropdown dropdown-end">
+          <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
+            <.icon name="hero-bars-3" class="w-5 h-5" />
+          </div>
+          <ul
+            tabindex="0"
+            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+          >
+            <li>
+              <a href={~p"/businesses"}>
+                <.icon name="hero-building-storefront" class="w-4 h-4" /> Businesses
+              </a>
+            </li>
+            <li>
+              <a href={~p"/categories"}>
+                <.icon name="hero-squares-2x2" class="w-4 h-4" /> Categories
+              </a>
+            </li>
+            <li>
+              <a href={~p"/businesses/map"}>
+                <.icon name="hero-map" class="w-4 h-4" /> Map
+              </a>
+            </li>
+            <li class="mt-2">
+              <a href={~p"/businesses/new"} class="btn btn-primary btn-sm">
+                <.icon name="hero-plus" class="w-4 h-4" /> Add Business
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </header>
 
     <main class="px-4 py-8 sm:px-6 lg:px-8">
@@ -141,7 +178,7 @@ defmodule LocalspotWeb.Layouts do
       <div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 transition-[left]" />
 
       <button
-        class="flex p-2 cursor-pointer w-1/3"
+        class="flex items-center justify-center p-2 cursor-pointer w-1/3"
         phx-click={JS.dispatch("phx:set-theme")}
         data-phx-theme="system"
       >
@@ -149,7 +186,7 @@ defmodule LocalspotWeb.Layouts do
       </button>
 
       <button
-        class="flex p-2 cursor-pointer w-1/3"
+        class="flex items-center justify-center p-2 cursor-pointer w-1/3"
         phx-click={JS.dispatch("phx:set-theme")}
         data-phx-theme="light"
       >
@@ -157,7 +194,7 @@ defmodule LocalspotWeb.Layouts do
       </button>
 
       <button
-        class="flex p-2 cursor-pointer w-1/3"
+        class="flex items-center justify-center p-2 cursor-pointer w-1/3"
         phx-click={JS.dispatch("phx:set-theme")}
         data-phx-theme="dark"
       >