127 lines
4.7 KiB
TypeScript
127 lines
4.7 KiB
TypeScript
'use client';
|
||
import Link from 'next/link';
|
||
import { usePathname } from 'next/navigation';
|
||
import styles from './Navigation.module.css';
|
||
import Image from 'next/image';
|
||
import { useEffect, useState } from 'react';
|
||
import { usePlayerStore } from '@/store/player.state';
|
||
import { useTasksStore } from '@/store/tasks.state';
|
||
import { ProvidersProps } from '@/components/providers/Providers';
|
||
|
||
const Navigation = ({ id }: Pick<ProvidersProps, 'id'>) => {
|
||
const pathname = usePathname();
|
||
|
||
const { player } = usePlayerStore();
|
||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||
|
||
const { tasks } = useTasksStore();
|
||
const countTasks = tasks.length - (player?.attributes.finished_tasks.data?.length || 0);
|
||
|
||
useEffect(() => {
|
||
if (isLoading) {
|
||
setIsLoading(false);
|
||
}
|
||
}, [isLoading]);
|
||
|
||
const getNavLink = (endpoint: string) => {
|
||
return `/${id}/${endpoint}`;
|
||
};
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
<Link href={getNavLink('home')} style={{ textDecoration: 'none' }}>
|
||
<div className={pathname === '/' ? styles.active_nav_menu : styles.nav_menu}>
|
||
{pathname === '/' ? (
|
||
<Image
|
||
src={'/icons/pickaxe-icon-selected.svg'}
|
||
alt={'pickaxe-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
) : (
|
||
<Image
|
||
src={'/icons/pickaxe-icon.svg'}
|
||
alt={'pickaxe-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
)}
|
||
<span>Главная</span>
|
||
</div>
|
||
</Link>
|
||
<Link href={getNavLink('shop')} style={{ textDecoration: 'none' }}>
|
||
<div className={pathname === '/shop' ? styles.active_nav_menu : styles.nav_menu}>
|
||
{pathname === '/shop' ? (
|
||
<Image
|
||
src={'/icons/shop-icon-selected.svg'}
|
||
alt={'shop-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
) : (
|
||
<Image
|
||
src={'/icons/shop-icon.svg'}
|
||
alt={'shop-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
)}
|
||
<span>Магазин</span>
|
||
</div>
|
||
</Link>
|
||
<Link
|
||
href={getNavLink('tasks')}
|
||
style={{ textDecoration: 'none', position: 'relative', height: '82px' }}
|
||
>
|
||
{countTasks !== 0 && <div className={styles.countTasks}>{countTasks}</div>}
|
||
<div
|
||
className={
|
||
pathname === '/tasks'
|
||
? `${styles.active_nav_menu} ${styles.task}`
|
||
: `${styles.nav_menu} ${styles.task}`
|
||
}
|
||
>
|
||
{pathname === '/tasks' ? (
|
||
<Image
|
||
src={'/icons/task-list-icon-selected.svg'}
|
||
alt={'task-list-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
) : (
|
||
<Image
|
||
src={'/icons/task-list-icon.svg'}
|
||
alt={'task-list-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
)}
|
||
<span>Задания</span>
|
||
</div>
|
||
</Link>
|
||
<Link href={getNavLink('friends')} style={{ textDecoration: 'none' }}>
|
||
<div className={pathname === '/friends' ? styles.active_nav_menu : styles.nav_menu}>
|
||
{pathname === '/friends' ? (
|
||
<Image
|
||
src={'/icons/friends-icon-selected.svg'}
|
||
alt={'friends-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
) : (
|
||
<Image
|
||
src={'/icons/friends-icon.svg'}
|
||
alt={'friends-icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
)}
|
||
<span>Друзья</span>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Navigation;
|