Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-09-06 06:23:53 +05:00
Code Issues Projects Releases Packages Activity

anix/refactor: navbar

Browse source
This commit is contained in:
Kentai Radiquum 2025-08-25 04:35:32 +05:00
parent 48345244f3
commit 6b84a312f7
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
11 changed files with 332 additions and 374 deletions
Download patch file Download diff file Expand all files Collapse all files

130
app/pages/MobileMenuPage.tsx
View file

@ -1,130 +0,0 @@
"use client";
import { Card } from "flowbite-react";
import { useUserStore } from "#/store/auth";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { SettingsModal } from "#/components/SettingsModal/SettingsModal";
import { useEffect, useState } from "react";
import Image from "next/image";
import { usePreferencesStore } from "#/store/preferences";
export const MenuPage = () => {
const userStore = useUserStore();
const preferenceStore = usePreferencesStore();
const router = useRouter();
const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
useEffect(() => {
if (!userStore.user) {
router.push("/");
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userStore.user]);
return (
<>
{userStore.user && (
<div className="fixed flex flex-col justify-end gap-2 left-4 right-4 bottom-24 sm:static">
<div className="flex flex-wrap items-center gap-2">
<Link
href={`/profile/${userStore.user.id}`}
className="flex-1 w-full min-w-full sm:w-auto sm:min-w-0"
>
<Card className="flex-1 w-full min-w-full sm:w-auto sm:min-w-0">
<div className="flex items-center gap-4">
<Image
src={userStore.user.avatar}
width={64}
height={64}
alt=""
className="w-16 h-16 rounded-full sm:w-28 sm:h-28"
/>
<div>
<p className="text-xl sm:text-2xl">
{userStore.user.login}
</p>
<p className="text-sm text-gray-400 whitespace-pre-wrap sm:text-base dark:text-gray-300">
{userStore.user.status}
</p>
</div>
</div>
</Card>
</Link>
<div className="flex flex-1 h-full gap-2 sm:flex-col">
<button
className="flex-1"
onClick={() => {
userStore.logout();
}}
>
<Card>
<div className="flex items-center justify-center gap-2 sm:justify-start">
<span
className={`iconify material-symbols--logout-rounded w-6 h-6 text-red-500`}
></span>
<p className="text-red-500">Выйти</p>
</div>
</Card>
</button>
<button
className="flex-1"
onClick={() => {
setIsSettingModalOpen(true);
}}
>
<Card className="flex-1">
<div className="flex items-center justify-center gap-2 sm:justify-start">
<span
className={`iconify material-symbols--settings-outline-rounded w-6 h-6`}
></span>
<p>Настройки</p>
</div>
</Card>
</button>
</div>
</div>
{preferenceStore.flags.showFifthButton != 3 ?
<Link href="/favorites" className="flex-1 sm:hidden">
<Card>
<div className="flex items-center gap-2">
<span
className={`iconify material-symbols--favorite-outline w-6 h-6`}
></span>
<p>Избранное</p>
</div>
</Card>
</Link>
: ""}
{preferenceStore.flags.showFifthButton != 4 ?
<Link href="/collections" className="flex-1 sm:hidden">
<Card>
<div className="flex items-center gap-2">
<span
className={`iconify material-symbols--collections-bookmark-outline w-6 h-6`}
></span>
<p>Коллекции</p>
</div>
</Card>
</Link>
: ""}
{preferenceStore.flags.showFifthButton != 5 ?
<Link href="/history" className="flex-1 sm:hidden">
<Card>
<div className="flex items-center gap-2">
<span
className={`iconify material-symbols--history w-6 h-6`}
></span>
<p>История</p>
</div>
</Card>
</Link>
: ""}
<SettingsModal
isOpen={isSettingModalOpen}
setIsOpen={setIsSettingModalOpen}
/>
</div>
)}
</>
);
};

2
app/pages/Search.tsx
View file

@ -279,7 +279,7 @@ export function SearchPage() {
return (
<div>
<div
className="sticky top-0 sm:top-[var(--header-height)] z-50 flex flex-wrap w-full gap-2 bg-black bg-opacity-25 py-2 px-2 rounded-lg backdrop-blur-sm"
className="sticky top-0 sm:top-[var(--header-height)] z-30 flex flex-wrap w-full gap-2 bg-black bg-opacity-25 py-2 px-2 rounded-lg backdrop-blur-sm"
style={{ "--header-height": `${HeaderH}px` } as React.CSSProperties}
>
<div className="flex flex-col flex-1 w-full lg:flex-row">