From ec894ab57e27713ad195fc7ab1fa4a5e035c458f Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 15:48:24 -0400
Subject: [PATCH] Complete breadcrumb navigation overhaul - all pages now use
 content breadcrumbs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- **BibleReader breadcrumbs**: 'Books > [Book Name] > Chapter X' (all clickable navigation)
- **Former 'Back to Chapters' button**: Replaced with intelligent breadcrumb navigation
- **Mobile header cleanup**: Removed mobile navigation info since breadcrumbs now in content
- **Consistent breadcrumb pattern**: Books → Book Name → Chapter across all pages
- **Mobile-friendly navigation**: No more header scrolling, breadcrumbs where needed
- **Full navigation chain**: Every breadcrumb is clickable for optimal user experience

All pages now have their own contextual breadcrumb navigation!
---
 frontend/src/App.tsx                    | 19 +----------
 frontend/src/components/BibleReader.tsx | 44 +++++++++++++++----------
 2 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 618f04ad..21794a90 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -424,24 +424,7 @@ function App() {
 
 
 
-            {/* 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>
+
 
             {/* Search, User Authentication & Dark Mode */}
             <div className="flex items-center space-x-2">
diff --git a/frontend/src/components/BibleReader.tsx b/frontend/src/components/BibleReader.tsx
index b3984c77..eeb4304a 100644
--- a/frontend/src/components/BibleReader.tsx
+++ b/frontend/src/components/BibleReader.tsx
@@ -302,54 +302,62 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
 
   return (
     <div>
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 space-y-4 sm:space-y-0">
+      {/* Breadcrumb Navigation */}
+      <div className="flex items-center justify-center space-x-1 mb-8">
+        <button
+          onClick={() => window.location.href = '/'}
+          className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+        >
+          <BookOpen className="h-4 w-4" />
+          <span>Books</span>
+        </button>
+        <ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500" />
         <button
           onClick={onBack}
-          className="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+          className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
         >
-          <ArrowLeft className="h-5 w-5" />
-          <span className="hidden sm:inline">Back to Chapters</span>
-          <span className="sm:hidden">Back</span>
+          {formatBookName(book)}
         </button>
+        <ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500" />
+        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+          Chapter {chapter}
+        </span>
+      </div>
 
-        {/* Font Size Controls */}
+      {/* Font Size Controls */}
+      <div className="flex items-center justify-center mb-8">
         <div className="flex items-center space-x-2">
-          <span className="hidden sm:inline text-sm text-gray-600 dark:text-gray-400">Font Size:</span>
-          <span className="sm:hidden text-xs text-gray-600 dark:text-gray-400">Size:</span>
+          <span className="text-sm text-gray-600 dark:text-gray-400">Font Size:</span>
           <div className="flex space-x-1">
             <button
               onClick={() => handleFontSizeChange('small')}
-              className={`px-2 sm:px-3 py-1 text-xs rounded ${
+              className={`px-3 py-1 text-xs rounded ${
                 fontSize === 'small'
                   ? 'bg-blue-600 text-white'
                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
               } transition-colors`}
             >
-              <span className="hidden sm:inline">Small</span>
-              <span className="sm:hidden">S</span>
+              Small
             </button>
             <button
               onClick={() => handleFontSizeChange('medium')}
-              className={`px-2 sm:px-3 py-1 text-xs rounded ${
+              className={`px-3 py-1 text-xs rounded ${
                 fontSize === 'medium'
                   ? 'bg-blue-600 text-white'
                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
               } transition-colors`}
             >
-              <span className="hidden sm:inline">Medium</span>
-              <span className="sm:hidden">M</span>
+              Medium
             </button>
             <button
               onClick={() => handleFontSizeChange('large')}
-              className={`px-2 sm:px-3 py-1 text-xs rounded ${
+              className={`px-3 py-1 text-xs rounded ${
                 fontSize === 'large'
                   ? 'bg-blue-600 text-white'
                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
               } transition-colors`}
             >
-              <span className="hidden sm:inline">Large</span>
-              <span className="sm:hidden">L</span>
+              Large
             </button>
           </div>
         </div>