mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +00:00
refactor: change mobile icons spacing in navbar
This commit is contained in:
parent
1990e5434c
commit
fc8fe97da7
GPG key ID:
858E8EE696525EED
2 changed files with 3 additions and 293 deletions
|
|
@ -1,290 +0,0 @@
|
||||||
"use client";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { usePathname } from "next/navigation";
|
|
||||||
import { useUserStore } from "#/store/auth";
|
|
||||||
import { Dropdown } from "flowbite-react";
|
|
||||||
import { useState } from "react";
|
|
||||||
import Image from "next/image";
|
|
||||||
import { SettingsModal } from "#/components/SettingsModal/SettingsModal";
|
|
||||||
|
|
||||||
export const Navbar = () => {
|
|
||||||
const pathname = usePathname();
|
|
||||||
const userStore: any = useUserStore((state) => state);
|
|
||||||
const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
|
|
||||||
|
|
||||||
const navLinks = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: "material-symbols--home-outline",
|
|
||||||
iconActive: "material-symbols--home",
|
|
||||||
title: "Домашняя",
|
|
||||||
href: "/",
|
|
||||||
categoryHref: "/home",
|
|
||||||
withAuthOnly: false,
|
|
||||||
mobileMenu: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: "material-symbols--search",
|
|
||||||
iconActive: "material-symbols--search",
|
|
||||||
title: "Поиск",
|
|
||||||
href: "/search",
|
|
||||||
withAuthOnly: false,
|
|
||||||
mobileMenu: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: "material-symbols--bookmarks-outline",
|
|
||||||
iconActive: "material-symbols--bookmarks",
|
|
||||||
title: "Закладки",
|
|
||||||
href: "/bookmarks",
|
|
||||||
withAuthOnly: true,
|
|
||||||
mobileMenu: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: "material-symbols--favorite-outline",
|
|
||||||
iconActive: "material-symbols--favorite",
|
|
||||||
title: "Избранное",
|
|
||||||
href: "/favorites",
|
|
||||||
withAuthOnly: true,
|
|
||||||
mobileMenu: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
icon: "material-symbols--collections-bookmark-outline",
|
|
||||||
iconActive: "material-symbols--collections-bookmark",
|
|
||||||
title: "Коллекции",
|
|
||||||
href: "/collections",
|
|
||||||
withAuthOnly: true,
|
|
||||||
mobileMenu: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
icon: "material-symbols--history",
|
|
||||||
iconActive: "material-symbols--history",
|
|
||||||
title: "История",
|
|
||||||
href: "/history",
|
|
||||||
withAuthOnly: true,
|
|
||||||
mobileMenu: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<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-center gap-4 px-4 py-4 mx-auto lg:justify-between lg:gap-0">
|
|
||||||
<nav className="flex gap-4">
|
|
||||||
{navLinks.map((link) => {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={link.id}
|
|
||||||
href={link.href}
|
|
||||||
className={`flex-col items-center lg:flex-row ${
|
|
||||||
link.withAuthOnly && !userStore.isAuth
|
|
||||||
? "hidden"
|
|
||||||
: link.mobileMenu
|
|
||||||
? "hidden sm:flex"
|
|
||||||
: "flex"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`iconify ${
|
|
||||||
[link.href, link.categoryHref].includes(
|
|
||||||
"/" + pathname.split("/")[1]
|
|
||||||
)
|
|
||||||
? link.iconActive
|
|
||||||
: link.icon
|
|
||||||
} w-6 h-6`}
|
|
||||||
></span>
|
|
||||||
<span
|
|
||||||
className={`${
|
|
||||||
[link.href, link.categoryHref].includes(
|
|
||||||
"/" + pathname.split("/")[1]
|
|
||||||
)
|
|
||||||
? "font-bold"
|
|
||||||
: ""
|
|
||||||
} text-sm sm:text-base`}
|
|
||||||
>
|
|
||||||
{link.title}
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
{userStore.isAuth ? (
|
|
||||||
<>
|
|
||||||
<div className="flex-col items-center justify-end hidden text-sm md:flex lg:gap-1 lg:justify-center lg:flex-row lg:text-base">
|
|
||||||
<Image
|
|
||||||
src={userStore.user.avatar}
|
|
||||||
alt=""
|
|
||||||
className="w-6 h-6 rounded-full"
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
/>
|
|
||||||
<Dropdown
|
|
||||||
label={userStore.user.login}
|
|
||||||
inline={true}
|
|
||||||
dismissOnClick={true}
|
|
||||||
theme={{
|
|
||||||
arrowIcon:
|
|
||||||
"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">
|
|
||||||
<Link
|
|
||||||
href={`/profile/${userStore.user.id}`}
|
|
||||||
className="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`iconify ${
|
|
||||||
pathname == `/profile/${userStore.user.id}`
|
|
||||||
? "font-bold mdi--user"
|
|
||||||
: "mdi--user-outline"
|
|
||||||
} w-6 h-6`}
|
|
||||||
></span>
|
|
||||||
<span>Профиль</span>
|
|
||||||
</Link>
|
|
||||||
</Dropdown.Item>
|
|
||||||
{navLinks.map((link) => {
|
|
||||||
return (
|
|
||||||
<Dropdown.Item
|
|
||||||
key={link.id + "_mobile"}
|
|
||||||
className={`${
|
|
||||||
link.mobileMenu ? "block sm:hidden" : "hidden"
|
|
||||||
} text-sm md:text-base`}
|
|
||||||
>
|
|
||||||
<Link
|
|
||||||
href={link.href}
|
|
||||||
className={`flex items-center gap-1`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`iconify ${
|
|
||||||
[link.href, link.categoryHref].includes(
|
|
||||||
"/" + pathname.split("/")[1]
|
|
||||||
)
|
|
||||||
? link.iconActive
|
|
||||||
: link.icon
|
|
||||||
} w-6 h-6`}
|
|
||||||
></span>
|
|
||||||
<span
|
|
||||||
className={`${
|
|
||||||
[link.href, link.categoryHref].includes(
|
|
||||||
"/" + pathname.split("/")[1]
|
|
||||||
)
|
|
||||||
? "font-bold"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{link.title}
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</Dropdown.Item>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Dropdown.Item
|
|
||||||
onClick={() => {
|
|
||||||
setIsSettingModalOpen(true);
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-1 text-sm md:text-base"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`iconify material-symbols--settings-outline-rounded w-6 h-6`}
|
|
||||||
></span>
|
|
||||||
<span>Настройки</span>
|
|
||||||
</Dropdown.Item>
|
|
||||||
<Dropdown.Item
|
|
||||||
onClick={() => {
|
|
||||||
userStore.logout();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-1 text-sm md:text-base"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`iconify material-symbols--logout-rounded w-6 h-6`}
|
|
||||||
></span>
|
|
||||||
<span>Выйти</span>
|
|
||||||
</Dropdown.Item>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
<div className="block md:hidden">
|
|
||||||
<Link
|
|
||||||
href={"/menu"}
|
|
||||||
className={`flex flex-col items-center justify-end text-sm md:hidden lg:gap-1 lg:justify-center lg:flex-row lg:text-base ${
|
|
||||||
pathname == "/menu" ? "font-bold" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src={userStore.user.avatar}
|
|
||||||
alt=""
|
|
||||||
className="w-6 h-6 rounded-full"
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
/>
|
|
||||||
<p>{userStore.user.login}</p>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Dropdown
|
|
||||||
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}
|
|
||||||
dismissOnClick={true}
|
|
||||||
theme={{
|
|
||||||
arrowIcon:
|
|
||||||
"ml-1 w-4 h-4 [transform:rotateX(180deg)] sm:transform-none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Dropdown.Item className="text-sm md:text-base">
|
|
||||||
<Link
|
|
||||||
href={
|
|
||||||
pathname != "/login" ? `/login?redirect=${pathname}` : "#"
|
|
||||||
}
|
|
||||||
className="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`w-6 h-6 sm:w-6 sm:h-6 iconify ${
|
|
||||||
pathname == "/login"
|
|
||||||
? "mdi--user-circle"
|
|
||||||
: "mdi--user-circle-outline"
|
|
||||||
}`}
|
|
||||||
></span>
|
|
||||||
<span
|
|
||||||
className={`${
|
|
||||||
pathname == "/login" ? "font-bold" : ""
|
|
||||||
} text-sm sm:text-base`}
|
|
||||||
>
|
|
||||||
Войти
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</Dropdown.Item>
|
|
||||||
<Dropdown.Item
|
|
||||||
onClick={() => {
|
|
||||||
setIsSettingModalOpen(true);
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-1 text-sm md:text-base"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`iconify material-symbols--settings-outline-rounded w-6 h-6 sm:w-6 sm:h-6`}
|
|
||||||
></span>
|
|
||||||
<span>Настройки</span>
|
|
||||||
</Dropdown.Item>
|
|
||||||
</Dropdown>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<SettingsModal
|
|
||||||
isOpen={isSettingModalOpen}
|
|
||||||
setIsOpen={setIsSettingModalOpen}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -87,8 +87,8 @@ export const Navbar = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black rounded-t-lg sm:sticky sm:top-0 sm:rounded-t-none sm:rounded-b-lg">
|
<header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black rounded-t-lg sm:sticky sm:top-0 sm:rounded-t-none sm:rounded-b-lg">
|
||||||
<div className="container flex items-center justify-center mx-auto sm:justify-between">
|
<div className="container flex items-center justify-center gap-4 mx-auto sm:gap-0 sm:justify-between">
|
||||||
<div className="flex items-center gap-4 px-2 py-4">
|
<div className="flex items-center gap-8 px-2 py-4 sm:gap-4">
|
||||||
{menuItems.map((item) => {
|
{menuItems.map((item) => {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -112,7 +112,7 @@ export const Navbar = () => {
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4 px-2 py-4">
|
<div className="flex items-center gap-8 px-2 py-4 sm:gap-4">
|
||||||
{!userStore.isAuth ?
|
{!userStore.isAuth ?
|
||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue