RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Complete breadcrumb navigation overhaul - all pages now use content breadcrumbs

Browse Source 
- **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!
This commit is contained in:
Ryderjj89
2025-09-28 15:48:24 -04:00
parent 0288c9e332
commit ec894ab57e
2 changed files with 27 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/App.tsx
View File

@@ -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">

44
frontend/src/components/BibleReader.tsx
View File

@@ -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>