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

Add mobile responsive navigation and Book icon favicon

Browse Source
This commit is contained in:
Ryderjj89
2025-09-13 16:25:58 -04:00
parent ceae5a5ef9
commit 6dd07e8e8e
2 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/public/index.html
View File

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

33
frontend/src/App.tsx
View File

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