ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-01-21 06:34:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: unify NavDisplays

Browse Source
This commit is contained in:
ManInDark
2025-06-17 22:30:18 +02:00
parent 55c2e3577d
commit 0f073760ee
4 changed files with 63 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/DesktopNavDisplay.tsx
View File

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

33
components/MobileNavDisplay.tsx
View File

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

61
components/NavDisplay.tsx Normal file
View File

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

33
components/Navigation.tsx
View File

@@ -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'} />
}