upd

src/components/Layout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router";
+import Navbar from "./Navbar";
+
+function Layout() {
+  return (
+    <div className="flex">
+      <div className="flex-1"></div>
+      <div className="w-[42.5vw] flex flex-col gap-[1.667vw]">
+        <Navbar />
+        <Outlet />
+      </div>
+      <div className="flex-1"></div>
+    </div>
+  );
+}
+
+export default Layout;

src/components/Navbar.tsx

@@ -0,0 +1,84 @@
+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="/"
+        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;

src/components/NewButton.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+
+interface NewButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant: "critical" | "secondary" | "primary" | "cta" | "menu";
+  className?: string;
+  size?: "small" | "medium" | "large";
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}
+
+function NewButton({
+  children,
+  variant = "primary",
+  size = "medium",
+  className,
+  ref,
+  ...props
+}: NewButtonProps) {
+  return (
+    <button
+      ref={ref}
+      {...props}
+      className={clsx(
+        "transition-all 2xl:rounded-[0.556vw] rounded-lg flex 2xl:gap-[0.556vw] gap-2 items-center justify-between font-medium disabled:bg-[#F6F6F6] disabled:text-[#D6D6D6]",
+        variant === "critical" &&
+          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
+        variant === "secondary" &&
+          "bg-[#F6F6F6] hover:bg-[#F0F0F0] active:text-[#7D7D7D] active:bg-[#F6F6F6]",
+        variant === "primary" &&
+          "bg-[#F8F7FE] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F8F7FE]",
+        variant === "cta" &&
+          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
+        size === "large" && "2xl:p-[1.111vw] p-4",
+        size === "medium" && "2xl:p-[0.833vw] p-3",
+        size === "small" && "2xl:p-[0.556vw] p-2",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default NewButton;

src/components/icons/DesktopIcon.tsx

@@ -1,12 +1,6 @@
 export default function DesktopIcon() {
   return (
-    <svg
-      width={20}
-      height={20}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M17.083 2.5H2.917c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h14.166c.69 0 1.25-.56 1.25-1.25v-10c0-.69-.56-1.25-1.25-1.25ZM10 15v2.917m-5.833 0h11.666"
         opacity={0.8}

src/index.css

@@ -4,6 +4,7 @@
 body {
   font-family: "Inter", sans-serif;
   background-color: #f2f0fe;
+  color: #141414;
 }
 
 button {

src/pages/DashboardPage.tsx

@@ -1,9 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { IUser } from "../types/IUser";
 import api from "../utils/api";
-import Sidebar from "../components/Sidebar";
 import { IServer } from "../types/IServer";
-import DesktopCard from "../components/DesktopCard";
 
 function DashboardPage() {
   const { data: me } = useQuery({
@@ -31,31 +29,7 @@ function DashboardPage() {
   //   }
   // }
 
-  return (
-    <div className="p-[0.833vw] flex gap-[0.833vw] min-h-dvh">
-      <div className="w-[3.333vw] flex flex-col justify-between"></div>
-      <div className="bg-white w-full rounded-[1.667vw] border border-black/5 p-[1.667vw] flex justify-between">
-        <div className="w-[13.889vw] space-y-[1.667vw]">
-          <div className="px-[1.111vw] py-[0.556vw]">
-            <img
-              src="/logo-mate.svg"
-              alt="logo"
-              className="w-[4.569vw] h-[1.944vw]"
-            />
-          </div>
-          <Sidebar />
-        </div>
-        <div className="w-[38.889vw]">
-          <div className="space-y-4">
-            {servers?.map((server) => (
-              <DesktopCard key={server.id} server={server} />
-            ))}
-          </div>
-        </div>
-        <div className="bg-green-200 w-[13.889vw]">...</div>
-      </div>
-    </div>
-  );
+  return <div className="p-[0.833vw] flex gap-[0.833vw] min-h-dvh"></div>;
 }
 
 export default DashboardPage;

src/routes.tsx

@@ -1,3 +1,4 @@
+import Layout from "./components/Layout";
 import DashboardPage from "./pages/DashboardPage";
 import LoginPage from "./pages/LoginPage";
 import ProtectedPage from "./pages/ProtectedPage";
@@ -8,8 +9,13 @@ export default [
     element: <ProtectedPage />,
     children: [
       {
-        index: true,
-        element: <DashboardPage />,
+        element: <Layout />,
+        children: [
+          {
+            index: true,
+            element: <DashboardPage />,
+          },
+        ],
       },
     ],
   },

vite.config.ts

@@ -5,4 +5,10 @@ import tailwindcss from "@tailwindcss/vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    host: true,
+  },
+  preview: {
+    host: true,
+  },
 });