Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: update Navbar

Browse source
This commit is contained in:
Kentai Radiquum 2024-08-13 12:40:05 +05:00
parent 4af7a2a632
commit dbe9eba23f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/components/Navbar/Navbar.tsx
View file

@ -68,7 +68,7 @@ export const Navbar = () => {
return ( return (
<> <>
<header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0"> <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
<div className="container flex items-center justify-between px-4 py-4 mx-auto"> <div className="container flex items-center justify-center gap-4 px-4 py-4 mx-auto md:justify-between md:gap-0">
<nav className="flex gap-4"> <nav className="flex gap-4">
{navLinks.map((link) => { {navLinks.map((link) => {
return ( return (
@ -91,7 +91,7 @@ export const Navbar = () => {
<span <span
className={`${ className={`${
pathname == link.href ? "font-bold" : "" pathname == link.href ? "font-bold" : ""
} text-xs sm:text-base`} } text-sm sm:text-base`}
> >
{link.title} {link.title}
</span> </span>
@ -100,7 +100,7 @@ export const Navbar = () => {
})} })}
</nav> </nav>
{userStore.isAuth ? ( {userStore.isAuth ? (
<div className="flex flex-col items-center justify-center gap-1 text-xs sm:flex-row sm:text-base"> <div className="flex flex-col items-center justify-end text-sm sm:gap-1 sm:justify-center sm:flex-row sm:text-base">
<img <img
src={userStore.user.avatar} src={userStore.user.avatar}
alt="" alt=""
@ -113,6 +113,9 @@ export const Navbar = () => {
theme={{ theme={{
arrowIcon: arrowIcon:
"ml-1 w-4 h-4 [transform:rotateX(180deg)] sm:transform-none", "ml-1 w-4 h-4 [transform:rotateX(180deg)] sm:transform-none",
floating: {
target: "text-sm sm:text-base",
},
}} }}
> >
<Dropdown.Item className="text-sm md:text-base"> <Dropdown.Item className="text-sm md:text-base">
@ -125,7 +128,7 @@ export const Navbar = () => {
pathname == `/profile/${userStore.user.id}` pathname == `/profile/${userStore.user.id}`
? "font-bold mdi--user" ? "font-bold mdi--user"
: "mdi--user-outline" : "mdi--user-outline"
} w-4 h-4 sm:w-6 sm:h-6`} } w-6 h-6`}
></span> ></span>
<span>Профиль</span> <span>Профиль</span>
</Link> </Link>
@ -145,7 +148,7 @@ export const Navbar = () => {
<span <span
className={`iconify ${ className={`iconify ${
pathname == link.href ? link.iconActive : link.icon pathname == link.href ? link.iconActive : link.icon
} w-4 h-4 sm:w-6 sm:h-6`} } w-6 h-6`}
></span> ></span>
<span <span
className={`${ className={`${
@ -165,7 +168,7 @@ export const Navbar = () => {
className="flex items-center gap-1 text-sm md:text-base" className="flex items-center gap-1 text-sm md:text-base"
> >
<span <span
className={`iconify material-symbols--settings-outline-rounded w-4 h-4 sm:w-6 sm:h-6`} className={`iconify material-symbols--settings-outline-rounded w-6 h-6`}
></span> ></span>
<span>Настройки</span> <span>Настройки</span>
</Dropdown.Item> </Dropdown.Item>
@ -176,7 +179,7 @@ export const Navbar = () => {
className="flex items-center gap-1 text-sm md:text-base" className="flex items-center gap-1 text-sm md:text-base"
> >
<span <span
className={`iconify material-symbols--logout-rounded w-4 h-4 sm:w-6 sm:h-6`} className={`iconify material-symbols--logout-rounded w-6 h-6`}
></span> ></span>
<span>Выйти</span> <span>Выйти</span>
</Dropdown.Item> </Dropdown.Item>
@ -184,7 +187,13 @@ export const Navbar = () => {
</div> </div>
) : ( ) : (
<Dropdown <Dropdown
label="Меню" label=""
renderTrigger={() => (
<div className="flex flex-col items-center text-sm md:text-base">
<span className="w-6 h-6 iconify mdi--menu"></span>
<span>Меню</span>
</div>
)}
inline={true} inline={true}
dismissOnClick={true} dismissOnClick={true}
theme={{ theme={{
@ -200,7 +209,7 @@ export const Navbar = () => {
className="flex items-center gap-1" className="flex items-center gap-1"
> >
<span <span
className={`w-4 h-4 sm:w-6 sm:h-6 iconify ${ className={`w-6 h-6 sm:w-6 sm:h-6 iconify ${
pathname == "/login" pathname == "/login"
? "mdi--user-circle" ? "mdi--user-circle"
: "mdi--user-circle-outline" : "mdi--user-circle-outline"
@ -209,7 +218,7 @@ export const Navbar = () => {
<span <span
className={`${ className={`${
pathname == "/login" ? "font-bold" : "" pathname == "/login" ? "font-bold" : ""
} text-xs sm:text-base`} } text-sm sm:text-base`}
> >
Войти Войти
</span> </span>
@ -222,7 +231,7 @@ export const Navbar = () => {
className="flex items-center gap-1 text-sm md:text-base" className="flex items-center gap-1 text-sm md:text-base"
> >
<span <span
className={`iconify material-symbols--settings-outline-rounded w-4 h-4 sm:w-6 sm:h-6`} className={`iconify material-symbols--settings-outline-rounded w-6 h-6 sm:w-6 sm:h-6`}
></span> ></span>
<span>Настройки</span> <span>Настройки</span>
</Dropdown.Item> </Dropdown.Item>