progres day 1

src/app/ui/nav-links.tsx

@@ -3,23 +3,24 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
-import styles from '@/app/page.module.css'
+import styles from './ui.module.scss'
+import Logo from '@/app/ui/logo';
 
 const links = [
 	{
-		name: 'Home',
-		href: '/',
-		icon: 'HomeIcon'
+		name: 'Главная',
+		href: '/pages/dashboard',
+		img: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'
 	},
 	{
 		name: 'Page1',
-		href: '/page1',
-		icon: 'page1Icon',
+		href: '/pages/page1',
+		img: ''
 	},
 	{
 		name: 'Page2',
-		href: '/page2',
-		icon: 'page2Icon',
+		href: '/pages/page2',
+		img: ''
 	}
 ];
 
@@ -27,22 +28,24 @@ export default function NavLinks() {
 	const pathname = usePathname();
 
 	return (
-		<div className='bg-[#fafafa]'>
-			<nav className={`${styles.nav}` + " flex max-w-[800px] w-full"}>
+		<div className=''>
+			<nav className={`${styles.sidebar}`}>
+				<Logo />
 				{links.map((link) => {
-					const LinkIcon = link.icon;
 					return (
 						<Link
 							key={link.name}
 							href={link.href}
 							className={clsx(
-								'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
+								`flex ${styles['nav-item']}`,
 								{
-									'bg-sky-100 text-blue-600': pathname === link.href,
+									'bg-[#5659f1]': pathname === link.href,
 								},
 							)}
 						>
-							<LinkIcon />
+							<svg viewBox="0 0 24 24" fill="currentColor">
+								<path d={link.img}></path>
+							</svg>
 							<p className="hidden md:block">{link.name}</p>
 						</Link>
 					);