Update navigation for iPhone safe areas

src/components/BottomNav.tsx

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