Navbar is now something nice looking thing :)
This commit is contained in:
Max
parent
c828d6b132
commit
073875b8a6
@ -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}>
|
||||
|
||||
4
enshi/src/AtomStore/AtomStore.ts
Normal file
4
enshi/src/AtomStore/AtomStore.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { atom } from "jotai";
|
||||
import { TUser } from "../types/UserType";
|
||||
|
||||
export const userAtom = atom<TUser>()
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
20
enshi/src/Components/NavBar/SearchField/SearchField.tsx
Normal file
20
enshi/src/Components/NavBar/SearchField/SearchField.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
70
enshi/src/Components/NavBar/UserButton/UserButton.tsx
Normal file
70
enshi/src/Components/NavBar/UserButton/UserButton.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
const en = {
|
||||
hello: "hello!"
|
||||
hello: "hello!",
|
||||
search: "Search...",
|
||||
}
|
||||
|
||||
export default en;
|
||||
@ -1,5 +1,6 @@
|
||||
const ru = {
|
||||
hello: "Привет!"
|
||||
hello: "Привет!",
|
||||
search: "Поиск...",
|
||||
}
|
||||
|
||||
export default ru;
|
||||
4
enshi/src/types/UserType.ts
Normal file
4
enshi/src/types/UserType.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export type TUser = {
|
||||
username: string;
|
||||
isAdmin: boolean;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user