no-copy-frontend/src/app/ui/nav-links.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
import styles from './ui.module.scss'
import Logo from '@/app/ui/logo';

const links = [
	{
		name: 'Главная',
		href: '/pages/dashboard',
		img: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'
	},
	{
		name: 'Page1',
		href: '/pages/page1',
		img: ''
	},
	{
		name: 'Page2',
		href: '/pages/page2',
		img: ''
	}
];

export default function NavLinks() {
	const pathname = usePathname();

	return (
		<div className=''>
			<nav className={`${styles.sidebar}`}>
				<Logo />
				{links.map((link) => {
					return (
						<Link
							key={link.name}
							href={link.href}
							className={clsx(
								`flex ${styles['nav-item']}`,
								{
									'bg-[#5659f1]': pathname === link.href,
								},
							)}
						>
							<svg viewBox="0 0 24 24" fill="currentColor">
								<path d={link.img}></path>
							</svg>
							<p className="hidden md:block">{link.name}</p>
						</Link>
					);
				})}
			</nav>
		</div>
	);
}