edit layout for small resolution screens

2026-01-23 15:43:05 +07:00
parent 38ce69047d
commit f8ab107724
22 changed files with 367 additions and 140 deletions
@@ -0,0 +1,113 @@
+'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>
+	);
+}