This commit is contained in:
2025-06-11 12:45:00 +05:00
parent 396589d3e6
commit 49f335e83a
6 changed files with 112 additions and 87 deletions
+1 -1
View File
@@ -23,7 +23,7 @@ function Button({
ref={ref}
{...props}
onClick={(e) => {
if (type !== "submit") e.preventDefault();
if (type !== "submit" && variant !== "menu") e.preventDefault();
onClick?.(e);
}}
className={clsx(
+81 -86
View File
@@ -1,4 +1,4 @@
import { Link, useLocation } from "react-router";
import { NavLink } from "react-router";
import HomeIcon from "./icons/HomeIcon";
import DesktopIcon from "./icons/DesktopIcon";
import Button from "./Button";
@@ -8,93 +8,88 @@ import ClientIcon from "./icons/ClientIcon";
import AppsIcon from "./icons/AppsIcon";
function Navbar() {
const { pathname } = useLocation();
return (
<div className="flex 2xl:gap-[0.278vw] items-center">
<Link to="/">
<Button
variant="menu"
size="large"
className={clsx(
"pointer-events-none",
pathname === "/" && "!bg-[#F8F7FE] !text-[#7B60F3]"
)}
>
<span className="2xl:size-[1.111vw] size-4">
<HomeIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Главная
</span>
</Button>
</Link>
<Link to="/sessions">
<Button
variant="menu"
size="large"
className={clsx(
"pointer-events-none",
pathname === "/sessions" && "!bg-[#F8F7FE] !text-[#7B60F3]"
)}
>
<span className="2xl:size-[1.111vw] size-4">
<DesktopIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">Сеансы</span>
</Button>
</Link>
<Link to="/">
<Button
variant="menu"
size="large"
className={clsx(
"pointer-events-none",
pathname === "/clients" && "!bg-[#F8F7FE] !text-[#7B60F3]"
)}
>
<span className="2xl:size-[1.111vw] size-4">
<PeopleIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Менеджеры
</span>
</Button>
</Link>
<Link to="/">
<Button
variant="menu"
size="large"
className={clsx(
"pointer-events-none",
pathname === "/settings" && "!bg-[#F8F7FE] !text-[#7B60F3]"
)}
>
<span className="2xl:size-[1.111vw] size-4">
<ClientIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Клиенты
</span>
</Button>
</Link>
<Link to="/">
<Button
variant="menu"
size="large"
className={clsx(
"pointer-events-none",
pathname === "/projects" && "!bg-[#F8F7FE] !text-[#7B60F3]"
)}
>
<span className="2xl:size-[1.111vw] size-4">
<AppsIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Проекты
</span>
</Button>
</Link>
<NavLink to="/">
{({ isActive }) => (
<Button
variant="menu"
size="large"
className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
>
<span className="2xl:size-[1.111vw] size-4">
<HomeIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Главная
</span>
</Button>
)}
</NavLink>
<NavLink to="/sessions">
{({ isActive }) => (
<Button
variant="menu"
size="large"
className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
>
<span className="2xl:size-[1.111vw] size-4">
<DesktopIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Сеансы
</span>
</Button>
)}
</NavLink>
<NavLink to="/managers">
{({ isActive }) => (
<Button
variant="menu"
size="large"
className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
>
<span className="2xl:size-[1.111vw] size-4">
<PeopleIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Менеджеры
</span>
</Button>
)}
</NavLink>
<NavLink to="/clients">
{({ isActive }) => (
<Button
variant="menu"
size="large"
className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
>
<span className="2xl:size-[1.111vw] size-4">
<ClientIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Клиенты
</span>
</Button>
)}
</NavLink>
<NavLink to="/projects">
{({ isActive }) => (
<Button
variant="menu"
size="large"
className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
>
<span className="2xl:size-[1.111vw] size-4">
<AppsIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">
Проекты
</span>
</Button>
)}
</NavLink>
</div>
);
}