Initial commit: Tapalka monorepo (bot, front, strapi)

CMyTapper/robucks-front/components/ui/navigation/Navigation.module.css

@@ -0,0 +1,40 @@
+.container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    position: fixed;
+    height: 82px;
+    width: 100%;
+    background: #101010;
+    bottom: 0;
+    z-index: 1;
+}
+
+.nav_menu, .active_nav_menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16.3px;
+    gap: 3px;
+}
+
+.countTasks {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    right: 10%;
+    top: -10%;
+    background: #D92000;
+}
+
+.active_nav_menu span, .active_nav_menu img {
+    color: #42BB47;
+}

CMyTapper/robucks-front/components/ui/navigation/Navigation.tsx

@@ -0,0 +1,126 @@
+'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;