From 6dd07e8e8edf074731f6f03a08f71fd22e9c2e90 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sat, 13 Sep 2025 16:25:58 -0400
Subject: [PATCH] Add mobile responsive navigation and Book icon favicon

---
 frontend/public/index.html |  1 +
 frontend/src/App.tsx       | 33 ++++++++++++++++++++++++++-------
 2 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 8662618d..3f6e8adb 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="ESV Bible - Read and study the English Standard Version Bible online" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/></svg>" />
     <title>ESV Bible</title>
   </head>
   <body>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 73b1b78e..dd51b982 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -182,18 +182,18 @@ function App() {
       <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
-            <div className="flex items-center space-x-4">
-              <Book className="h-8 w-8 text-blue-600" />
+            <div className="flex items-center space-x-2 sm:space-x-4">
+              <Book className="h-6 w-6 sm:h-8 sm:w-8 text-blue-600" />
               <button 
                 onClick={() => navigate('/')}
-                className="text-xl font-bold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
+                className="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
               >
                 ESV Bible
               </button>
             </div>
 
-            {/* Navigation Breadcrumb */}
-            <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
+            {/* Navigation Breadcrumb - Hidden on small screens */}
+            <div className="hidden md:flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
               {currentBook && (
                 <>
                   <button
@@ -225,15 +225,34 @@ function App() {
               )}
             </div>
 
+            {/* Mobile Navigation - Simplified */}
+            <div className="flex md:hidden items-center space-x-1 text-xs text-gray-600 dark:text-gray-400">
+              {currentBook && (
+                <>
+                  <span className="font-medium text-gray-900 dark:text-gray-100">
+                    {formatBookName(currentBook)}
+                  </span>
+                  {currentChapter && (
+                    <>
+                      <span>•</span>
+                      <span className="font-medium text-gray-900 dark:text-gray-100">
+                        Ch. {currentChapter}
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </div>
+
             {/* Dark Mode Toggle */}
             <button
               onClick={() => setDarkMode(!darkMode)}
               className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
             >
               {darkMode ? (
-                <Sun className="h-5 w-5 text-yellow-500" />
+                <Sun className="h-4 w-4 sm:h-5 sm:w-5 text-yellow-500" />
               ) : (
-                <Moon className="h-5 w-5 text-gray-600" />
+                <Moon className="h-4 w-4 sm:h-5 sm:w-5 text-gray-600" />
               )}
             </button>
           </div>
