From c828d6b132cddc1a596a1bb05db0da6def8b9ea6 Mon Sep 17 00:00:00 2001
From: Max <er4gonik@gmail.com>
Date: Mon, 18 Nov 2024 19:35:17 +0300
Subject: [PATCH 1/2] Done

---
 enshi/package-lock.json                       | 100 ++++++++++++++++++
 enshi/package.json                            |   1 +
 .../{ArcticleViewer.tsx => ArticleViewer.tsx} |   2 +-
 enshi/src/Components/NavBar/NavBar.tsx        |  87 ++++++++-------
 enshi/src/index.css                           |   8 +-
 enshi/src/routes/routes.tsx                   |   4 +-
 enshi/tailwind.config.js                      |  47 ++++----
 package-lock.json                             |  54 ++++++++++
 package.json                                  |   5 +
 9 files changed, 241 insertions(+), 67 deletions(-)
 rename enshi/src/Components/ArticleViewer/{ArcticleViewer.tsx => ArticleViewer.tsx} (85%)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/enshi/package-lock.json b/enshi/package-lock.json
index d490701..641fb3f 100644
--- a/enshi/package-lock.json
+++ b/enshi/package-lock.json
@@ -14,6 +14,7 @@
         "@radix-ui/react-tooltip": "^1.1.2",
         "@radix-ui/themes": "^3.1.3",
         "@tanstack/react-query": "^5.55.0",
+        "axios": "^1.7.7",
         "html-react-parser": "^5.1.16",
         "i18n": "^0.15.1",
         "i18next": "^23.14.0",
@@ -3336,6 +3337,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -3374,6 +3381,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3602,6 +3620,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -3738,6 +3768,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -4357,6 +4396,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -4374,6 +4433,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -5185,6 +5258,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5712,6 +5806,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/enshi/package.json b/enshi/package.json
index d3a5b58..9047b25 100644
--- a/enshi/package.json
+++ b/enshi/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/themes": "^3.1.3",
     "@tanstack/react-query": "^5.55.0",
+    "axios": "^1.7.7",
     "html-react-parser": "^5.1.16",
     "i18n": "^0.15.1",
     "i18next": "^23.14.0",
diff --git a/enshi/src/Components/ArticleViewer/ArcticleViewer.tsx b/enshi/src/Components/ArticleViewer/ArticleViewer.tsx
similarity index 85%
rename from enshi/src/Components/ArticleViewer/ArcticleViewer.tsx
rename to enshi/src/Components/ArticleViewer/ArticleViewer.tsx
index 753f69d..ac30298 100644
--- a/enshi/src/Components/ArticleViewer/ArcticleViewer.tsx
+++ b/enshi/src/Components/ArticleViewer/ArticleViewer.tsx
@@ -1,7 +1,7 @@
 import { Container } from "@radix-ui/themes";
 import React from "react";
 
-export default function ArcticleViewer() {
+export default function ArticleViewer() {
     return (
         <>
             <div className="ql-snow">
diff --git a/enshi/src/Components/NavBar/NavBar.tsx b/enshi/src/Components/NavBar/NavBar.tsx
index a3d630c..64cfbe9 100644
--- a/enshi/src/Components/NavBar/NavBar.tsx
+++ b/enshi/src/Components/NavBar/NavBar.tsx
@@ -1,42 +1,25 @@
-import { Button, Card, ChevronDownIcon, Text } from "@radix-ui/themes";
+import { Button, Heading, IconButton, TextField, useThemeContext } from "@radix-ui/themes";
 import * as NavigationMenu from "@radix-ui/react-navigation-menu";
 import { useLocation, useNavigate } from "react-router-dom";
-
+import { PersonIcon } from "@radix-ui/react-icons"
+ 
 export default function NavBar() {
     return (
-        <nav className="pt-2">
-            <NavigationMenu.Root
-                orientation="horizontal"
-                className="flex justify-center"
-            >
-                <NavigationMenu.List className="flex justify-center gap-2">
-                    <NavItem text="Cringer" to="/" />
+        <nav className="flex justify-between pt-2 pb-2 ml-4 mr-4">
+            <NavigationMenu.Root orientation="horizontal">
+                <NavigationMenu.List className="flex items-center justify-start gap-8">
+                    <NavItem text="Home" to="/" />
 
-                    <NavItem text="C-Cringer" to="/c" />
-
-                    <NavigationMenu.Item className="text-center">
-                        <NavigationMenu.Trigger className="flex items-center">
-                            <Button
-                                asChild
-                                className="w-fit pr-2 h-fit rounded-full m-0 p-0  pl-2 mt-2 mb-2 duration-[50ms]"
-                                variant="ghost"
-                                highContrast
-                            >
-                                <Text
-                                    size={"3"}
-                                    className="flex items-center gap-1"
-                                >
-                                    Cringer 123 <ChevronDownIcon />
-                                </Text>
-                            </Button>
-                        </NavigationMenu.Trigger>
-
-                        <NavigationMenu.Content className="absolute data-[motion=from-start]:scale-150">
-                            <Card>asd</Card>
-                        </NavigationMenu.Content>
-                    </NavigationMenu.Item>
+                    <NavItem text="Following" to="/c" />
                 </NavigationMenu.List>
             </NavigationMenu.Root>
+
+            <TextField.Root className="w-1/3 rounded-lg" placeholder="Search...">
+            </TextField.Root>
+
+            <IconButton>
+                <PersonIcon />
+            </IconButton>
         </nav>
     );
 }
@@ -49,19 +32,35 @@ type TNavItem = {
 function NavItem(props: TNavItem) {
     const navigate = useNavigate();
     const location = useLocation();
+    const theme = useThemeContext();
 
     return (
-        <NavigationMenu.Item>
-            <NavigationMenu.Link>
-                <Button
-                    className="w-fit h-fit rounded-full m-0 p-0 pr-2 pl-2 mt-2 mb-2 duration-[50ms]"
-                    highContrast
-                    variant={location.pathname === props.to ? "solid" : "ghost"}
-                    onClick={() => navigate(props.to)}
-                >
-                    <Text size={"3"}>{props.text}</Text>
-                </Button>
-            </NavigationMenu.Link>
-        </NavigationMenu.Item>
+        <div className="relative flex flex-col">
+            <NavigationMenu.Item>
+                <NavigationMenu.Link>
+                    <div>
+                        <Button
+                            className="w-fit border-0 border-b-[0px] border-solid"
+                            highContrast
+                            variant="ghost"
+                            onClick={() => navigate(props.to)}
+                        >
+                            <Heading weight={"medium"} size={"3"}>
+                                {props.text}
+                            </Heading>
+                        </Button>
+                    </div>
+                </NavigationMenu.Link>
+            </NavigationMenu.Item>
+            {location.pathname == props.to ? (
+                <div
+                    className={`absolute animate-widthOut bottom-[-0.35rem] 
+                                w-full h-[2px] z-[999] rounded-full`}
+                    style={{
+                        background: `var(--${theme.accentColor}-10)`,
+                    }}
+                ></div>
+            ) : null}
+        </div>
     );
 }
diff --git a/enshi/src/index.css b/enshi/src/index.css
index 4ded44e..5238975 100644
--- a/enshi/src/index.css
+++ b/enshi/src/index.css
@@ -1,10 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 .radix-themes {
-	--default-font-family: 
-    --heading-font-family:
+	--default-font-family: "Times New Roman"; ;
+ 
+    --heading-font-family: "Edu AU VIC WA NT Pre", cursive;
 		/* Your custom font for <Heading> components */ 
         --code-font-family:
 		/* Your custom font for <Code> components */ 
diff --git a/enshi/src/routes/routes.tsx b/enshi/src/routes/routes.tsx
index 153236e..8331bbb 100644
--- a/enshi/src/routes/routes.tsx
+++ b/enshi/src/routes/routes.tsx
@@ -17,10 +17,10 @@ export const routes = createRoutesFromElements(
             errorElement={<ErrorBoundary />}
             element={<MainPage />}
         >
-            <Route index element={<Text>Cringer path</Text>} />
+            <Route index element={<Text size={"5"}>Cringer path</Text>} />
             <Route
                 path="/a?/c"
-                element={<Text>Cringer path, but this a</Text>}
+                element={<Text weight={"regular"}>Cringer path, but this a</Text>}
             ></Route>
         </Route>
     </>
diff --git a/enshi/tailwind.config.js b/enshi/tailwind.config.js
index 76881c2..af5c3aa 100644
--- a/enshi/tailwind.config.js
+++ b/enshi/tailwind.config.js
@@ -1,21 +1,32 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      animation: {
-        'appear': 'appear 0.25s'
-      },
-      keyframes: {
-        appear: {
-          '100%': {opacity: '1'}
-        }
-      }
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+        extend: {
+            colors: {
+                "primary-color": "var(--primary-color)",
+                "secondary-color": "var(--secondary-color)",
+            },
+            animation: {
+                appear: "appear 0.25s",
+                widthOut: "widthOut cubic-bezier(0.4, 0, 0.6, 1) 0.4s",
+            },
+            keyframes: {
+                appear: {
+                    "100%": { opacity: "1" },
+                },
+                widthOut: {
+                    "0%": {
+                        width: "0%",
+                        left: "50%",
+                    },
+                    "100%": {
+                        width: "100%",
+                        left: "0%",
+                    },
+                },
+            },
+        },
     },
-  },
-  plugins: [],
-}
-
+    plugins: [],
+};
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..bae962a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,54 @@
+{
+  "name": "Enshi",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@radix-ui/react-icons": "^1.3.2"
+      }
+    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cc5e205
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2"
+  }
+}

From 073875b8a660861d2f6669e7b29d3093fbb2e093 Mon Sep 17 00:00:00 2001
From: Max <er4gonik@gmail.com>
Date: Tue, 19 Nov 2024 20:09:10 +0300
Subject: [PATCH 2/2] Navbar is now something nice looking thing :)

---
 enshi/src/App.tsx                             | 21 -----
 enshi/src/AtomStore/AtomStore.ts              |  4 +
 enshi/src/Components/NavBar/NavBar.tsx        | 76 ++++---------------
 .../NavBar/NavigationMenu/NavigationMenu.tsx  | 58 ++++++++++++++
 .../NavBar/SearchField/SearchField.tsx        | 20 +++++
 .../NavBar/UserButton/UserButton.tsx          | 70 +++++++++++++++++
 enshi/src/Pages/MainPage/MainPage.tsx         | 39 +++++-----
 enshi/src/locale/en.ts                        |  3 +-
 enshi/src/locale/ru.ts                        |  3 +-
 enshi/src/types/UserType.ts                   |  4 +
 10 files changed, 194 insertions(+), 104 deletions(-)
 create mode 100644 enshi/src/AtomStore/AtomStore.ts
 create mode 100644 enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx
 create mode 100644 enshi/src/Components/NavBar/SearchField/SearchField.tsx
 create mode 100644 enshi/src/Components/NavBar/UserButton/UserButton.tsx
 create mode 100644 enshi/src/types/UserType.ts

diff --git a/enshi/src/App.tsx b/enshi/src/App.tsx
index 952c44e..f840c5e 100644
--- a/enshi/src/App.tsx
+++ b/enshi/src/App.tsx
@@ -1,36 +1,15 @@
 import "./App.css";
 import "@radix-ui/themes/styles.css";
 import { Theme, ThemePanel } from "@radix-ui/themes";
-
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { QueryClientProvider } from "@tanstack/react-query";
 import queryClient from "./api/QueryClient/QueryClient";
 import { routes } from "./routes/routes";
-import { useEffect } from "react";
 import "axios";
-import { axiosLocalhost } from "./api/axios/axios";
 
 const router = createBrowserRouter(routes);
 
 export default function App() {
-    useEffect(() => {
-        let f = async () => {
-            let c = await axiosLocalhost.post(
-                "/login",
-                {
-                    nickname: "StasikChess",
-                    password: "123456",
-                }
-            );
-
-            console.log(c.headers);
-            console.log(document.cookie);
-        };
-
-        f();
-
-    }, []);
-
     return (
         <Theme className="h-fit" accentColor="indigo" grayColor="slate">
             <QueryClientProvider client={queryClient}>
diff --git a/enshi/src/AtomStore/AtomStore.ts b/enshi/src/AtomStore/AtomStore.ts
new file mode 100644
index 0000000..352eca9
--- /dev/null
+++ b/enshi/src/AtomStore/AtomStore.ts
@@ -0,0 +1,4 @@
+import { atom } from "jotai";
+import { TUser } from "../types/UserType";
+
+export const userAtom = atom<TUser>()
\ No newline at end of file
diff --git a/enshi/src/Components/NavBar/NavBar.tsx b/enshi/src/Components/NavBar/NavBar.tsx
index 64cfbe9..bd60301 100644
--- a/enshi/src/Components/NavBar/NavBar.tsx
+++ b/enshi/src/Components/NavBar/NavBar.tsx
@@ -1,66 +1,20 @@
-import { Button, Heading, IconButton, TextField, useThemeContext } from "@radix-ui/themes";
-import * as NavigationMenu from "@radix-ui/react-navigation-menu";
-import { useLocation, useNavigate } from "react-router-dom";
-import { PersonIcon } from "@radix-ui/react-icons"
- 
+import {
+    Container,
+} from "@radix-ui/themes";
+import SearchField from "./SearchField/SearchField";
+import UserButton from "./UserButton/UserButton";
+import CustomNavigationMenu from "./NavigationMenu/NavigationMenu";
+
 export default function NavBar() {
     return (
-        <nav className="flex justify-between pt-2 pb-2 ml-4 mr-4">
-            <NavigationMenu.Root orientation="horizontal">
-                <NavigationMenu.List className="flex items-center justify-start gap-8">
-                    <NavItem text="Home" to="/" />
+        <Container size={"4"}>
+            <nav className="flex justify-center pt-2 pb-2 ml-4 mr-4">
+                <CustomNavigationMenu />
 
-                    <NavItem text="Following" to="/c" />
-                </NavigationMenu.List>
-            </NavigationMenu.Root>
+                <SearchField />
 
-            <TextField.Root className="w-1/3 rounded-lg" placeholder="Search...">
-            </TextField.Root>
-
-            <IconButton>
-                <PersonIcon />
-            </IconButton>
-        </nav>
+                <UserButton />
+            </nav>
+        </Container>
     );
-}
-
-type TNavItem = {
-    text: string;
-    to: string;
-};
-
-function NavItem(props: TNavItem) {
-    const navigate = useNavigate();
-    const location = useLocation();
-    const theme = useThemeContext();
-
-    return (
-        <div className="relative flex flex-col">
-            <NavigationMenu.Item>
-                <NavigationMenu.Link>
-                    <div>
-                        <Button
-                            className="w-fit border-0 border-b-[0px] border-solid"
-                            highContrast
-                            variant="ghost"
-                            onClick={() => navigate(props.to)}
-                        >
-                            <Heading weight={"medium"} size={"3"}>
-                                {props.text}
-                            </Heading>
-                        </Button>
-                    </div>
-                </NavigationMenu.Link>
-            </NavigationMenu.Item>
-            {location.pathname == props.to ? (
-                <div
-                    className={`absolute animate-widthOut bottom-[-0.35rem] 
-                                w-full h-[2px] z-[999] rounded-full`}
-                    style={{
-                        background: `var(--${theme.accentColor}-10)`,
-                    }}
-                ></div>
-            ) : null}
-        </div>
-    );
-}
+}
\ No newline at end of file
diff --git a/enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx b/enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx
new file mode 100644
index 0000000..e82d496
--- /dev/null
+++ b/enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx
@@ -0,0 +1,58 @@
+import * as NavigationMenu from "@radix-ui/react-navigation-menu";
+import { useThemeContext, Button, Heading } from "@radix-ui/themes";
+import { useNavigate, useLocation } from "react-router-dom";
+
+export default function CustomNavigationMenu() {
+    return (
+        <div className="flex-1">
+            <NavigationMenu.Root orientation="horizontal">
+                <NavigationMenu.List className="flex items-center justify-start gap-8">
+                    <NavItem text="Home" to="/" />
+
+                    <NavItem text="Following" to="/c" />
+                </NavigationMenu.List>
+            </NavigationMenu.Root>
+        </div>
+    );
+}
+
+type TNavItem = {
+    text: string;
+    to: string;
+};
+
+function NavItem(props: TNavItem) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const theme = useThemeContext();
+
+    return (
+        <div className="relative flex flex-col">
+            <NavigationMenu.Item>
+                <NavigationMenu.Link>
+                    <div>
+                        <Button
+                            className="w-fit border-0 border-b-[0px] border-solid"
+                            highContrast
+                            variant="ghost"
+                            onClick={() => navigate(props.to)}
+                        >
+                            <Heading weight={"medium"} size={"3"}>
+                                {props.text}
+                            </Heading>
+                        </Button>
+                    </div>
+                </NavigationMenu.Link>
+            </NavigationMenu.Item>
+            {location.pathname == props.to ? (
+                <div
+                    className={`absolute animate-widthOut bottom-[-0.35rem] 
+                                w-full h-[2px] z-[999] rounded-full`}
+                    style={{
+                        background: `var(--${theme.accentColor}-10)`,
+                    }}
+                ></div>
+            ) : null}
+        </div>
+    );
+}
diff --git a/enshi/src/Components/NavBar/SearchField/SearchField.tsx b/enshi/src/Components/NavBar/SearchField/SearchField.tsx
new file mode 100644
index 0000000..74cf6fb
--- /dev/null
+++ b/enshi/src/Components/NavBar/SearchField/SearchField.tsx
@@ -0,0 +1,20 @@
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { TextField } from "@radix-ui/themes";
+import { useTranslation } from "react-i18next";
+
+export default function SearchField() {
+    const {t} = useTranslation()
+
+    return (
+        <div className="flex-1">
+            <TextField.Root
+                className="w-full rounded-lg"
+                placeholder={t("search")}
+            >
+                <TextField.Slot>
+                    <MagnifyingGlassIcon />
+                </TextField.Slot>
+            </TextField.Root>
+        </div>
+    );
+}
diff --git a/enshi/src/Components/NavBar/UserButton/UserButton.tsx b/enshi/src/Components/NavBar/UserButton/UserButton.tsx
new file mode 100644
index 0000000..c9c1868
--- /dev/null
+++ b/enshi/src/Components/NavBar/UserButton/UserButton.tsx
@@ -0,0 +1,70 @@
+import {
+    EnterIcon,
+    ExitIcon,
+    LaptopIcon,
+    PersonIcon,
+} from "@radix-ui/react-icons";
+import { DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes";
+import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
+import { useAtomValue } from "jotai";
+import { userAtom } from "../../../AtomStore/AtomStore";
+import { Link } from "react-router-dom";
+
+export default function UserButton() {
+    const user = useAtomValue(userAtom);
+
+    return (
+        <div className="flex justify-end flex-1">
+            <DropdownMenu.Root>
+                <DropdownMenu.Trigger>
+                    <IconButton>
+                        <PersonIcon />
+                    </IconButton>
+                </DropdownMenu.Trigger>
+
+                <DropdownMenu.Content className="w-fit">
+                    <DropdownMenu.Item>
+                        <Link to={"/profile"}>
+                            <Flex className="justify-between gap-2">
+                                <Icon>
+                                    <PersonIcon />
+                                </Icon>
+
+                                <Text>Profile</Text>
+                            </Flex>
+                        </Link>
+                    </DropdownMenu.Item>
+
+                    <DropdownMenu.Item>
+                        <Flex className="justify-between gap-2">
+                            <Icon>
+                                <LaptopIcon />
+                            </Icon>
+                            <Text>Your blogs</Text>
+                        </Flex>
+                    </DropdownMenu.Item>
+
+                    <DropdownMenu.Separator />
+
+                    <DropdownMenu.Item color={user ? "red" : "green"}>
+                        {user ? (
+                            <Flex className="justify-between gap-2">
+                                <Icon>
+                                    <ExitIcon />
+                                </Icon>
+                                <Text>Log out</Text>
+                            </Flex>
+                        ) : (
+                            <Flex className="justify-between gap-2">
+                                <Icon>
+                                    <EnterIcon />
+                                </Icon>
+                                <Text>Log in</Text>
+                            </Flex>
+                        )}
+                    </DropdownMenu.Item>
+                </DropdownMenu.Content>
+            </DropdownMenu.Root>
+        </div>
+    );
+}
diff --git a/enshi/src/Pages/MainPage/MainPage.tsx b/enshi/src/Pages/MainPage/MainPage.tsx
index 12102a2..905549a 100644
--- a/enshi/src/Pages/MainPage/MainPage.tsx
+++ b/enshi/src/Pages/MainPage/MainPage.tsx
@@ -1,23 +1,22 @@
-import React from 'react'
-import { Outlet } from 'react-router-dom'
-import NavBar from '../../Components/NavBar/NavBar'
-import { axiosLocalhost } from '../../api/axios/axios'
+import React from "react";
+import { Outlet } from "react-router-dom";
+import NavBar from "../../Components/NavBar/NavBar";
+import { axiosLocalhost } from "../../api/axios/axios";
+import { Container } from "@radix-ui/themes";
 
 export default function MainPage() {
-  return (
-    <>
-        <NavBar />
-        <Outlet />
-        <button
-        onClick={
-          async () => {
-            let d = await axiosLocalhost.get("getCookie")
-            console.log(d.data);
-            
-          }
-        }>
-          qwpofjqwifhqwuif
-        </button>
-    </>
-  )
+    return (
+        <>
+            <NavBar />
+            <Outlet />
+            <button
+                onClick={async () => {
+                    let d = await axiosLocalhost.get("getCookie");
+                    console.log(d.data);
+                }}
+            >
+                Click for cookie test
+            </button>
+        </>
+    );
 }
diff --git a/enshi/src/locale/en.ts b/enshi/src/locale/en.ts
index 5a576c9..bd15612 100644
--- a/enshi/src/locale/en.ts
+++ b/enshi/src/locale/en.ts
@@ -1,5 +1,6 @@
 const en = {
-    hello: "hello!"
+    hello: "hello!",
+    search: "Search...",
 }
 
 export default en;
\ No newline at end of file
diff --git a/enshi/src/locale/ru.ts b/enshi/src/locale/ru.ts
index b202ef3..abba300 100644
--- a/enshi/src/locale/ru.ts
+++ b/enshi/src/locale/ru.ts
@@ -1,5 +1,6 @@
 const ru = {
-    hello: "Привет!"
+    hello: "Привет!",
+    search: "Поиск...",
 }
 
 export default ru;
\ No newline at end of file
diff --git a/enshi/src/types/UserType.ts b/enshi/src/types/UserType.ts
new file mode 100644
index 0000000..c48416c
--- /dev/null
+++ b/enshi/src/types/UserType.ts
@@ -0,0 +1,4 @@
+export type TUser = {
+    username: string;
+    isAdmin: boolean;
+}
\ No newline at end of file