114 lines
2.8 KiB
TypeScript
114 lines
2.8 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { usePathname } from 'next/navigation';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import Logo from '@/app/ui/logo';
|
||
|
|
import DropDownList from '@/app/ui/navigation/nav-link-dropdown';
|
||
|
|
import { logout } from '@/app/actions/auth';
|
||
|
|
import { useTranslations } from 'next-intl';
|
||
|
|
import navigation from './navigation.json';
|
||
|
|
import { useSideMenuStore } from '@/app/stores/sideMenuStore';
|
||
|
|
import { useRef } from 'react';
|
||
|
|
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
||
|
|
|
||
|
|
export default function NavLinks() {
|
||
|
|
const pathname = usePathname().replace('/en/', '/').replace('/ru/', '/');
|
||
|
|
const t = useTranslations('Global');
|
||
|
|
|
||
|
|
const setMenuState = useSideMenuStore(s => s.setValue);
|
||
|
|
const menuState = useSideMenuStore(s => s.value);
|
||
|
|
const links = navigation;
|
||
|
|
|
||
|
|
const sideMenuRef = useRef<HTMLDivElement>(null)
|
||
|
|
useClickOutside(
|
||
|
|
sideMenuRef,
|
||
|
|
() => {
|
||
|
|
setMenuState(false);
|
||
|
|
},
|
||
|
|
menuState
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav
|
||
|
|
className={`sidebar ${menuState ? 'show' : ''}`}
|
||
|
|
ref={sideMenuRef}
|
||
|
|
>
|
||
|
|
<div className="flex justify-between">
|
||
|
|
<Logo />
|
||
|
|
<button
|
||
|
|
className="sidebar-close-button"
|
||
|
|
onClick={() => {
|
||
|
|
setMenuState(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z" /></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<Link
|
||
|
|
key={t('home')}
|
||
|
|
href='/pages/dashboard'
|
||
|
|
className={clsx(
|
||
|
|
"flex nav-link",
|
||
|
|
{
|
||
|
|
'bg-[#5659f1]': pathname === '/pages/dashboard',
|
||
|
|
},
|
||
|
|
)}
|
||
|
|
onClick={() => {
|
||
|
|
setMenuState(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
|
||
|
|
</svg>
|
||
|
|
<p className="">{t('home')}</p>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<DropDownList />
|
||
|
|
|
||
|
|
{links.map((link) => {
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={link.name}
|
||
|
|
href={link.href}
|
||
|
|
className={clsx(
|
||
|
|
`flex nav-link`,
|
||
|
|
{
|
||
|
|
'bg-[#5659f1]': pathname === link.href,
|
||
|
|
},
|
||
|
|
)}
|
||
|
|
onClick={() => {
|
||
|
|
setMenuState(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d={link.img}></path>
|
||
|
|
</svg>
|
||
|
|
<p className="">
|
||
|
|
{t(link.name)}
|
||
|
|
</p>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
<Link
|
||
|
|
key={t('exit')}
|
||
|
|
href='/login'
|
||
|
|
className="flex nav-link"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setMenuState(false);
|
||
|
|
logout();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"></path>
|
||
|
|
</svg>
|
||
|
|
<p className="">{t('exit')}</p>
|
||
|
|
</Link>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|