Merge pull request #6 from Nekiiinkognito/feature/newNavbar

Navbar revamp

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",

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",

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}>

enshi/src/AtomStore/AtomStore.ts

@@ -0,0 +1,4 @@
+import { atom } from "jotai";
+import { TUser } from "../types/UserType";
+
+export const userAtom = atom<TUser>()

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">

enshi/src/Components/NavBar/NavBar.tsx

@@ -1,67 +1,20 @@
-import { Button, Card, ChevronDownIcon, Text } from "@radix-ui/themes";
+import {
-import * as NavigationMenu from "@radix-ui/react-navigation-menu";
+    Container,
-import { useLocation, useNavigate } from "react-router-dom";
+} 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="pt-2">
+        <Container size={"4"}>
-            <NavigationMenu.Root
+            <nav className="flex justify-center pt-2 pb-2 ml-4 mr-4">
-                orientation="horizontal"
+                <CustomNavigationMenu />
-                className="flex justify-center"
-            >
-                <NavigationMenu.List className="flex justify-center gap-2">
-                    <NavItem text="Cringer" to="/" />
 
-                    <NavItem text="C-Cringer" to="/c" />
+                <SearchField />
 
-                    <NavigationMenu.Item className="text-center">
+                <UserButton />
-                        <NavigationMenu.Trigger className="flex items-center">
+            </nav>
-                            <Button
+        </Container>
-                                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>
-                </NavigationMenu.List>
-            </NavigationMenu.Root>
-        </nav>
-    );
-}
-
-type TNavItem = {
-    text: string;
-    to: string;
-};
-
-function NavItem(props: TNavItem) {
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    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>
     );
 }

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

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

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

enshi/src/Pages/MainPage/MainPage.tsx

@@ -1,23 +1,22 @@
-import React from 'react'
+import React from "react";
-import { Outlet } from 'react-router-dom'
+import { Outlet } from "react-router-dom";
-import NavBar from '../../Components/NavBar/NavBar'
+import NavBar from "../../Components/NavBar/NavBar";
-import { axiosLocalhost } from '../../api/axios/axios'
+import { axiosLocalhost } from "../../api/axios/axios";
+import { Container } from "@radix-ui/themes";
 
 export default function MainPage() {
-  return (
+    return (
-    <>
+        <>
-        <NavBar />
+            <NavBar />
-        <Outlet />
+            <Outlet />
-        <button
+            <button
-        onClick={
+                onClick={async () => {
-          async () => {
+                    let d = await axiosLocalhost.get("getCookie");
-            let d = await axiosLocalhost.get("getCookie")
+                    console.log(d.data);
-            console.log(d.data);
+                }}
-            
+            >
-          }
+                Click for cookie test
-        }>
+            </button>
-          qwpofjqwifhqwuif
+        </>
-        </button>
+    );
-    </>
-  )
 }

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: 
+	--default-font-family: "Times New Roman"; ;
-    --heading-font-family:
+ 
+    --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 */ 

enshi/src/locale/en.ts

@@ -1,5 +1,6 @@
 const en = {
-    hello: "hello!"
+    hello: "hello!",
+    search: "Search...",
 }
 
 export default en;

enshi/src/locale/ru.ts

@@ -1,5 +1,6 @@
 const ru = {
-    hello: "Привет!"
+    hello: "Привет!",
+    search: "Поиск...",
 }
 
 export default ru;

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>
     </>

enshi/src/types/UserType.ts

@@ -0,0 +1,4 @@
+export type TUser = {
+    username: string;
+    isAdmin: boolean;
+}

enshi/tailwind.config.js

@@ -1,21 +1,32 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-content: [
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    "./index.html",
+    theme: {
-    "./src/**/*.{js,ts,jsx,tsx}",
+        extend: {
-  ],
+            colors: {
-  theme: {
+                "primary-color": "var(--primary-color)",
-    extend: {
+                "secondary-color": "var(--secondary-color)",
-      animation: {
+            },
-        'appear': 'appear 0.25s'
+            animation: {
-      },
+                appear: "appear 0.25s",
-      keyframes: {
+                widthOut: "widthOut cubic-bezier(0.4, 0, 0.6, 1) 0.4s",
-        appear: {
+            },
-          '100%': {opacity: '1'}
+            keyframes: {
-        }
+                appear: {
-      }
+                    "100%": { opacity: "1" },
+                },
+                widthOut: {
+                    "0%": {
+                        width: "0%",
+                        left: "50%",
+                    },
+                    "100%": {
+                        width: "100%",
+                        left: "0%",
+                    },
+                },
+            },
+        },
     },
-  },
+    plugins: [],
-  plugins: [],
+};
-}
-

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"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2"
+  }
+}