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: resolved mobile display errors

Browse Source
This commit is contained in:
ManInDark
2025-06-17 23:45:55 +02:00
parent 6c0b196de2
commit 06e802f2f5
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/NavDisplay.tsx
View File

@@ -10,7 +10,7 @@ export default function NavDisplay({ navItems, isMobile }: { navItems: NavItemTy
if (isMobile) { if (isMobile) {
return ( return (
<> <>
<div className={isMobile && isIOS ? "pb-20" : "pb-16"} /> {isMobile && (<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" : ""}`}> <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"> <div className="grid grid-cols-6 w-full">
{navItems.map((item) => ( {navItems.map((item) => (

22
components/Navigation.tsx
View File

@@ -6,20 +6,21 @@ import { useTranslations } from 'next-intl'
import { ElementType, useEffect, useState } from 'react' import { ElementType, useEffect, useState } from 'react'
import NavDisplay from './NavDisplay' import NavDisplay from './NavDisplay'
type ViewPort = 'main' | 'mobile'
export interface NavItemType { export interface NavItemType {
icon: ElementType; icon: ElementType;
label: string; label: string;
href: string; href: string;
} }
interface NavigationProps { export default function Navigation({ position }: { position: 'main' | 'mobile' }) {
position: ViewPort const t = useTranslations('Navigation');
} const [isMobile, setIsMobile] = useState(window.innerWidth < 1024);
export default function Navigation({ position: viewPort }: NavigationProps) { useEffect(() => {
const t = useTranslations('Navigation') const handleResize = () => {setIsMobile(window.innerWidth < 1024); };
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, [setIsMobile]);
const currentNavItems: NavItemType[] = [ const currentNavItems: NavItemType[] = [
{ icon: Home, label: t('dashboard'), href: '/' }, { icon: Home, label: t('dashboard'), href: '/' },
@@ -30,5 +31,10 @@ export default function Navigation({ position: viewPort }: NavigationProps) {
{ icon: Coins, label: t('coins'), href: '/coins' }, { icon: Coins, label: t('coins'), href: '/coins' },
] ]
return <NavDisplay navItems={currentNavItems} isMobile={viewPort === 'mobile'} /> if ((position === 'mobile' && isMobile) || (position === 'main' && !isMobile)) {
return <NavDisplay navItems={currentNavItems} isMobile={isMobile} />
}
else {
return <></>
}
} }