fix: unify NavDisplays

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 MobileNavDisplay from './MobileNavDisplay'
+import NavDisplay from './NavDisplay'
 
 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(() => {
-    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
+  return <NavDisplay navItems={currentNavItems} isMobile={viewPort === 'mobile'} />
 }