fix: unify NavDisplays

components/DesktopNavDisplay.tsx

@@ -1,33 +0,0 @@
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { NavDisplayProps } from './Navigation';
-
-export default function DesktopNavDisplay({ navItems }: NavDisplayProps) {
-  const pathname = usePathname();
-
-  return (
-    <div className="hidden lg:flex lg:flex-shrink-0">
-      <div className="flex flex-col w-64">
-        <div className="flex flex-col h-0 flex-1 bg-gray-800">
-          <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-            <nav className="mt-5 flex-1 px-2 space-y-1">
-              {navItems.map((item) => (
-                <Link
-                  key={item.label}
-                  href={item.href}
-                  className={"flex items-center px-2 py-2 font-medium rounded-md " +
-                    (pathname === (item.href) ?
-                      "text-blue-500 hover:text-blue-600 hover:bg-gray-700" :
-                      "text-gray-300 hover:text-white hover:bg-gray-700")}
-                >
-                  <item.icon className="mr-4 flex-shrink-0 h-6 w-6" aria-hidden="true" />
-                  {item.label}
-                </Link>
-              ))}
-            </nav>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

components/MobileNavDisplay.tsx

@@ -1,33 +0,0 @@
-import { useHelpers } from '@/lib/client-helpers';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { NavDisplayProps } from './Navigation';
-
-export default function MobileNavDisplay({ navItems }: NavDisplayProps) {
-  const pathname = usePathname();
-  const { isIOS } = useHelpers()
-
-  return (
-    <>
-      <div className={isIOS ? "pb-20" : "pb-16"} />
-      <nav className={`lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg ${isIOS ? "pb-4" : ""}`}>
-        <div className="grid grid-cols-6 w-full">
-          {navItems.map((item) => (
-            <Link
-              key={item.label}
-              href={item.href}
-              className={"flex flex-col items-center py-2 hover:text-blue-600 dark:hover:text-blue-300 " +
-                (pathname === (item.href) ?
-                  "text-blue-500 dark:text-blue-500" :
-                  "text-gray-300 dark:text-gray-300")
-              }
-            >
-              <item.icon className="h-6 w-6" />
-              <span className="text-xs mt-1">{item.label}</span>
-            </Link>
-          ))}
-        </div>
-      </nav>
-    </>
-  );
-}

components/NavDisplay.tsx

@@ -0,0 +1,61 @@
+import { useHelpers } from '@/lib/client-helpers';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { NavItemType } from './Navigation';
+
+export default function NavDisplay({ navItems, isMobile }: { navItems: NavItemType[], isMobile: boolean }) {
+  const pathname = usePathname();
+  const { isIOS } = useHelpers()
+
+  if (isMobile) {
+    return (
+        <>
+        <div className={isMobile && isIOS ? "pb-20" : "pb-16"} />
+        <nav className={`lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg ${isIOS ? "pb-4" : ""}`}>
+            <div className="grid grid-cols-6 w-full">
+            {navItems.map((item) => (
+                <Link
+                key={item.label}
+                href={item.href}
+                className={"flex flex-col items-center py-2 hover:text-blue-600 dark:hover:text-blue-300 " +
+                    (pathname === (item.href) ?
+                    "text-blue-500 dark:text-blue-500" :
+                    "text-gray-300 dark:text-gray-300")
+                }
+                >
+                <item.icon className="h-6 w-6" />
+                <span className="text-xs mt-1">{item.label}</span>
+                </Link>
+            ))}
+            </div>
+        </nav>
+        </>
+    );
+  } else {
+    return (
+        <div className="hidden lg:flex lg:flex-shrink-0">
+            <div className="flex flex-col w-64">
+                <div className="flex flex-col h-0 flex-1 bg-gray-800">
+                    <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+                        <nav className="mt-5 flex-1 px-2 space-y-1">
+                        {navItems.map((item) => (
+                            <Link
+                            key={item.label}
+                            href={item.href}
+                            className={"flex items-center px-2 py-2 font-medium rounded-md " +
+                                (pathname === (item.href) ?
+                                "text-blue-500 hover:text-blue-600 hover:bg-gray-700" :
+                                "text-gray-300 hover:text-white hover:bg-gray-700")}
+                            >
+                            <item.icon className="mr-4 flex-shrink-0 h-6 w-6" aria-hidden="true" />
+                            {item.label}
+                            </Link>
+                        ))}
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+  }
+}

components/Navigation.tsx

@@ -4,8 +4,7 @@ import { HabitIcon, TaskIcon } from '@/lib/constants'
 import { Calendar, Coins, Gift, Home } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { ElementType, useEffect, useState } from 'react'
-import DesktopNavDisplay from './DesktopNavDisplay'
+import NavDisplay from './NavDisplay'
-import MobileNavDisplay from './MobileNavDisplay'
 
 type ViewPort = 'main' | 'mobile'
 
@@ -19,13 +18,8 @@ interface NavigationProps {
   position: ViewPort
 }
 
-export interface NavDisplayProps {
-  navItems: NavItemType[];
-}
-
 export default function Navigation({ position: viewPort }: NavigationProps) {
   const t = useTranslations('Navigation')
-  const [isMobileView, setIsMobileView] = useState(false)
 
   const currentNavItems: NavItemType[] = [
     { icon: Home, label: t('dashboard'), href: '/' },
@@ -36,28 +30,5 @@ export default function Navigation({ position: viewPort }: NavigationProps) {
     { icon: Coins, label: t('coins'), href: '/coins' },
   ]
 
-  useEffect(() => {
+  return <NavDisplay navItems={currentNavItems} isMobile={viewPort === 'mobile'} />
-    const handleResize = () => {
-      setIsMobileView(window.innerWidth < 1024)
-    }
-
-    // Set initial value
-    handleResize()
-
-    // Add event listener
-    window.addEventListener('resize', handleResize)
-
-    // Cleanup
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
-  if (viewPort === 'mobile' && isMobileView) {
-    return <MobileNavDisplay navItems={currentNavItems} />
-  }
-
-  if (viewPort === 'main' && !isMobileView) {
-    return <DesktopNavDisplay navItems={currentNavItems} />
-  }
-
-  return null // Explicitly return null if no view matches
 }