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

feat: mobile menu page instead of dropdown for authorized user

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-21 01:54:02 +05:00
parent 3ab5954197
commit 75eb4a3170
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 327 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

115
app/pages/MobileMenuPage.tsx Normal file
View file

@ -0,0 +1,115 @@
"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";
export const MenuPage = () => {
const userStore = useUserStore();
const router = useRouter();
const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
useEffect(() => {
if (!userStore.user) {
router.push("/");
}
}, [userStore.user]);
return (
<>
{userStore.user && (
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-center gap-2">
<Link href={`/profile/${userStore.user.id}`} className="flex-1">
<Card>
<div className="flex items-center gap-4">
<img
src={userStore.user.avatar}
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 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>
<Link href="/favorites" className="flex-1">
<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>
<Link href="/collections" className="flex-1">
<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>
<Link href="/history" className="flex-1">
<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>
)}
</>
);
};