upd

src/components/Button.tsx

@@ -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(

src/components/Navbar.tsx

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

src/pages/ClientsPage.tsx

@@ -0,0 +1,5 @@
+function ClientsPage() {
+  return <div></div>;
+}
+
+export default ClientsPage;

src/pages/ManagersPage.tsx

@@ -0,0 +1,5 @@
+function ManagersPage() {
+  return <div></div>;
+}
+
+export default ManagersPage;

src/pages/ProjectsPage.tsx

@@ -0,0 +1,5 @@
+function ProjectsPage() {
+  return <div></div>;
+}
+
+export default ProjectsPage;

src/routes.tsx

@@ -1,6 +1,9 @@
 import Layout from "./components/Layout";
+import ClientsPage from "./pages/ClientsPage";
 import DashboardPage from "./pages/DashboardPage";
 import LoginPage from "./pages/LoginPage";
+import ManagersPage from "./pages/ManagersPage";
+import ProjectsPage from "./pages/ProjectsPage";
 import ProtectedPage from "./pages/ProtectedPage";
 import SessionsPage from "./pages/SessionsPage";
 
@@ -20,6 +23,18 @@ export default [
             path: "sessions",
             element: <SessionsPage />,
           },
+          {
+            path: "managers",
+            element: <ManagersPage />,
+          },
+          {
+            path: "clients",
+            element: <ClientsPage />,
+          },
+          {
+            path: "projects",
+            element: <ProjectsPage />,
+          },
         ],
       },
     ],