Update navigation for iPhone safe areas
This commit is contained in:
nmemmert committed
1 parent
d6f4576105
commit
ed526b39b1
1 file changed
+72
-7
@@ -2,6 +2,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface BottomNavProps {
|
||||
activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about';
|
||||
@@ -10,45 +11,109 @@ interface BottomNavProps {
|
||||
|
||||
export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
|
||||
const { logout, user } = useAuth();
|
||||
const [showMoreMenu, setShowMoreMenu] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
const primaryNavItems = [
|
||||
{ id: 'home' as const, label: 'Home', icon: '🏠' },
|
||||
{ id: 'compose' as const, label: 'Compose', icon: '✍️' },
|
||||
{ id: 'journal' as const, label: 'Journal', icon: '📅' },
|
||||
{ id: 'praying' as const, label: 'Praying', icon: '🙏' },
|
||||
];
|
||||
|
||||
const moreMenuItems = [
|
||||
{ id: 'answered' as const, label: 'Answered', icon: '✅' },
|
||||
{ id: 'reflections' as const, label: 'Reflections', icon: '📖' },
|
||||
{ id: 'about' as const, label: 'About', icon: 'ℹ️' },
|
||||
];
|
||||
|
||||
const allNavItems = [...primaryNavItems, ...moreMenuItems];
|
||||
|
||||
const handleMoreClick = () => {
|
||||
setShowMoreMenu(!showMoreMenu);
|
||||
};
|
||||
|
||||
const handleMenuItemClick = (tab: typeof activeTab) => {
|
||||
onTabChange(tab);
|
||||
setShowMoreMenu(false);
|
||||
};
|
||||
|
||||
const isMoreActive = moreMenuItems.some(item => item.id === activeTab);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* More Menu Modal */}
|
||||
{showMoreMenu && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 md:hidden z-40"
|
||||
onClick={() => setShowMoreMenu(false)}
|
||||
/>
|
||||
<div className="fixed bottom-16 right-4 left-4 bg-white dark:bg-slate-800 rounded-lg shadow-xl md:hidden z-50 overflow-hidden" style={{ marginBottom: 'var(--safe-area-inset-bottom)' }}>
|
||||
{moreMenuItems.map(item => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => handleMenuItemClick(item.id)}
|
||||
className={`w-full px-6 py-4 flex items-center gap-4 transition-colors border-b border-slate-200 dark:border-slate-700 last:border-b-0 ${
|
||||
activeTab === item.id
|
||||
? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{item.icon}</span>
|
||||
<span className="text-base font-medium">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => {
|
||||
logout();
|
||||
setShowMoreMenu(false);
|
||||
}}
|
||||
className="w-full px-6 py-4 flex items-center gap-4 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
||||
>
|
||||
<span className="text-2xl">🚪</span>
|
||||
<span className="text-base font-medium">Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Mobile Bottom Navigation */}
|
||||
<nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 md:hidden z-50" style={{ paddingBottom: 'var(--safe-area-inset-bottom)' }}>
|
||||
<nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 md:hidden z-50 shadow-lg" style={{ paddingBottom: 'var(--safe-area-inset-bottom)' }}>
|
||||
<div className="flex justify-around">
|
||||
{navItems.map(item => (
|
||||
{primaryNavItems.map(item => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onTabChange(item.id)}
|
||||
className={`flex-1 py-3 px-2 flex flex-col items-center justify-center gap-1 transition-colors ${
|
||||
className={`flex-1 py-2.5 px-2 flex flex-col items-center justify-center gap-0.5 transition-colors ${
|
||||
activeTab === item.id
|
||||
? 'text-blue-600 dark:text-blue-400'
|
||||
: 'text-slate-600 dark:text-slate-400'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{item.icon}</span>
|
||||
<span className="text-xl">{item.icon}</span>
|
||||
<span className="text-xs font-medium">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={handleMoreClick}
|
||||
className={`flex-1 py-2.5 px-2 flex flex-col items-center justify-center gap-0.5 transition-colors ${
|
||||
isMoreActive || showMoreMenu
|
||||
? 'text-blue-600 dark:text-blue-400'
|
||||
: 'text-slate-600 dark:text-slate-400'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">⋯</span>
|
||||
<span className="text-xs font-medium">More</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Desktop Top Navigation */}
|
||||
<nav className="hidden md:fixed md:top-0 md:left-0 md:right-0 md:bg-white md:dark:bg-slate-800 md:border-b md:border-slate-200 md:dark:border-slate-700 md:z-50 md:flex md:items-center md:justify-between md:px-6 md:py-4">
|
||||
<nav className="hidden md:fixed md:top-0 md:left-0 md:right-0 md:bg-white md:dark:bg-slate-800 md:border-b md:border-slate-200 md:dark:border-slate-700 md:z-50 md:flex md:items-center md:justify-between md:px-6 md:py-3 md:shadow-sm">
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">Haver</h1>
|
||||
<div className="flex gap-1">
|
||||
{navItems.map(item => (
|
||||
{allNavItems.map(item => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onTabChange(item.id)}
|
||||
|
||||
Reference in new issue
Block a user