added iOS padding (#69)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.2.1
+
+### Changed
+
+* Added bottom padding for nav bar on iOS devices (#63)
+
 ## Version 0.2.0
 
 ### Added

components/Navigation.tsx

@@ -7,6 +7,7 @@ import { browserSettingsAtom } from '@/lib/atoms'
 import { useEffect, useState } from 'react'
 import AboutModal from './AboutModal'
 import { HabitIcon, TaskIcon } from '@/lib/constants'
+import { useHelpers } from '@/lib/client-helpers'
 
 type ViewPort = 'main' | 'mobile'
 
@@ -33,6 +34,7 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
   const [isMobileView, setIsMobileView] = useState(false)
   const [browserSettings] = useAtom(browserSettingsAtom)
   const isTasksView = browserSettings.viewType === 'tasks'
+  const { isIOS } = useHelpers()
 
   useEffect(() => {
     const handleResize = () => {
@@ -52,14 +54,14 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
   if (viewPort === 'mobile' && isMobileView) {
     return (
       <>
-        <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
+        <div className={isIOS ? "pb-20" : "pb-16"} /> {/* Add padding at the bottom to prevent content from being hidden */}
-        <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
+        <nav className={`lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg ${isIOS ? "pb-4" : ""}`}>
-          <div className="flex justify-around">
+          <div className="flex justify-around divide-x divide-gray-300/60 dark:divide-gray-600/60">
             {[...navItems(isTasksView).filter(item => item.position === 'main'), ...navItems(isTasksView).filter(item => item.position === 'bottom')].map((item) => (
               <Link
                 key={item.label}
                 href={item.href}
-                className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+                className="flex flex-col items-center py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 flex-1"
               >
                 <item.icon className="h-6 w-6" />
                 <span className="text-xs mt-1">{item.label}</span>

lib/client-helpers.ts

@@ -12,6 +12,19 @@ export function useHelpers() {
   const currentUserId = session?.user.id
   const [usersData] = useAtom(usersAtom)
   const currentUser = usersData.users.find((u) => u.id === currentUserId)
+  // detect iOS: https://stackoverflow.com/a/9039885
+  function iOS() {
+    return [
+      'iPad Simulator',
+      'iPhone Simulator',
+      'iPod Simulator',
+      'iPad',
+      'iPhone',
+      'iPod',
+    ].includes(navigator.platform)
+    // iPad on iOS 13 detection
+    || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+  }  
 
   return {
     currentUserId,
@@ -19,6 +32,7 @@ export function useHelpers() {
     usersData,
     status,
     hasPermission: (resource: 'habit' | 'wishlist' | 'coins', action: 'write' | 'interact') => currentUser?.isAdmin ||
-      checkPermission(currentUser?.permissions, resource, action)
+      checkPermission(currentUser?.permissions, resource, action),
+    isIOS: iOS(),
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",