85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { NavLink } from "react-router";
|
||
import clsx from "clsx";
|
||
import HomeIcon from "./icons/HomeIcon";
|
||
import DesktopIcon from "./icons/DesktopIcon";
|
||
|
||
function Navbar() {
|
||
return (
|
||
<div className="flex 2xl:gap-[0.278vw] items-center">
|
||
<NavLink
|
||
to="/"
|
||
className={({ isActive }) =>
|
||
clsx(
|
||
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
|
||
isActive && "text-[#7B60F3]"
|
||
)
|
||
}
|
||
>
|
||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||
<HomeIcon />
|
||
</span>
|
||
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
|
||
</NavLink>
|
||
<NavLink
|
||
to="sessions"
|
||
className={({ isActive }) =>
|
||
clsx(
|
||
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
|
||
isActive && "text-[#7B60F3]"
|
||
)
|
||
}
|
||
>
|
||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||
<DesktopIcon />
|
||
</span>
|
||
<span className="2xl:text-[0.972vw] text-sm font-medium">Сеансы</span>
|
||
</NavLink>
|
||
<NavLink
|
||
to="/"
|
||
className={({ isActive }) =>
|
||
clsx(
|
||
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
|
||
isActive && "text-[#7B60F3]"
|
||
)
|
||
}
|
||
>
|
||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||
<HomeIcon />
|
||
</span>
|
||
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
|
||
</NavLink>
|
||
<NavLink
|
||
to="/"
|
||
className={({ isActive }) =>
|
||
clsx(
|
||
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
|
||
isActive && "text-[#7B60F3]"
|
||
)
|
||
}
|
||
>
|
||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||
<HomeIcon />
|
||
</span>
|
||
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
|
||
</NavLink>
|
||
<NavLink
|
||
to="/"
|
||
className={({ isActive }) =>
|
||
clsx(
|
||
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
|
||
isActive && "text-[#7B60F3]"
|
||
)
|
||
}
|
||
>
|
||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||
<HomeIcon />
|
||
</span>
|
||
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
|
||
</NavLink>
|
||
{/* */}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Navbar;
|