progres day 1

src/app/ui/button.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { testConnect } from '@/app/api/action';
+
+async function clickHandler() {
+	console.log('click');
+	testConnect();
+}
+
+export default function Button() {
+	return (
+		<button onClick={() => {
+			clickHandler();
+		}}>button</button>
+	);
+}

src/app/ui/logo.tsx

@@ -0,0 +1,12 @@
+import styles from './ui.module.scss';
+
+export default function Logo() {
+	return (
+		<div className={`${styles.logo}`}>
+			<svg viewBox="0 0 24 24" fill="currentColor">
+				<path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"></path>
+			</svg>
+			No copy
+		</div>
+	)
+}

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>
 					);

src/app/ui/ui.module.scss

@@ -0,0 +1,36 @@
+.sidebar {
+	width: 280px;
+	background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
+	padding: 30px 0;
+	border-radius: 0 30px 30px 0;
+	position: fixed;
+	height: 100vh;
+	overflow-y: auto;
+	z-index: 100;
+}
+
+.nav-item {
+	margin-bottom: 8px;
+
+	svg {
+		margin-right: 15px;
+		width: 20px;
+		height: 20px;
+	}
+}
+
+.logo {
+	display: flex;
+	align-items: center;
+	padding: 0 30px 40px;
+	color: white;
+	font-size: 24px;
+	font-weight: 600;
+	text-transform: uppercase;
+
+	svg {
+		width: 32px;
+		height: 32px;
+		margin-right: 15px;
+	}
+}