yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { XMarkIcon } from "@heroicons/react/24/outline";
2import type { AccountFragment } from "@hey/indexer";
3import { Link } from "react-router";
4import AccountLink from "@/components/Shared/Account/AccountLink";
5import SingleAccount from "@/components/Shared/Account/SingleAccount";
6import Bookmarks from "@/components/Shared/Navbar/NavItems/Bookmarks";
7import Groups from "@/components/Shared/Navbar/NavItems/Groups";
8import Logout from "@/components/Shared/Navbar/NavItems/Logout";
9import Rewards from "@/components/Shared/Navbar/NavItems/Rewards";
10import Settings from "@/components/Shared/Navbar/NavItems/Settings";
11import Support from "@/components/Shared/Navbar/NavItems/Support";
12import SwitchAccount from "@/components/Shared/Navbar/NavItems/SwitchAccount";
13import ThemeSwitch from "@/components/Shared/Navbar/NavItems/ThemeSwitch";
14import YourAccount from "@/components/Shared/Navbar/NavItems/YourAccount";
15import cn from "@/helpers/cn";
16import { useMobileDrawerModalStore } from "@/store/non-persisted/modal/useMobileDrawerModalStore";
17import { useAccountStore } from "@/store/persisted/useAccountStore";
18
19const MobileDrawerMenu = () => {
20 const { currentAccount } = useAccountStore();
21 const { setShow: setShowMobileDrawer } = useMobileDrawerModalStore();
22
23 const handleCloseDrawer = () => {
24 setShowMobileDrawer(false);
25 };
26
27 const itemClass = "py-3 hover:bg-gray-100 dark:hover:bg-gray-800";
28
29 return (
30 <div className="no-scrollbar fixed inset-0 z-10 size-full overflow-y-auto bg-gray-100 py-4 md:hidden dark:bg-black">
31 <button className="px-5" onClick={handleCloseDrawer} type="button">
32 <XMarkIcon className="size-6" />
33 </button>
34 <div className="w-full space-y-2">
35 <AccountLink
36 account={currentAccount as AccountFragment}
37 className="mt-2 flex items-center space-x-2 px-5 py-3 hover:bg-gray-200 dark:hover:bg-gray-800"
38 onClick={handleCloseDrawer}
39 >
40 <SingleAccount
41 account={currentAccount as AccountFragment}
42 linkToAccount={false}
43 showUserPreview={false}
44 />
45 </AccountLink>
46 <div className="bg-white dark:bg-gray-900">
47 <div className="divider" />
48 <SwitchAccount className={cn(itemClass, "px-4")} />
49 <div className="divider" />
50 </div>
51 <div className="bg-white dark:bg-gray-900">
52 <div className="divider" />
53 <div>
54 <AccountLink
55 account={currentAccount as AccountFragment}
56 onClick={handleCloseDrawer}
57 >
58 <YourAccount className={cn(itemClass, "px-4")} />
59 </AccountLink>
60 <Link onClick={handleCloseDrawer} to="/settings/rewards">
61 <Rewards className={cn(itemClass, "px-4")} />
62 </Link>
63 <Link onClick={handleCloseDrawer} to="/settings">
64 <Settings className={cn(itemClass, "px-4")} />
65 </Link>
66 <Link onClick={handleCloseDrawer} to="/groups">
67 <Groups className={cn(itemClass, "px-4")} />
68 </Link>
69 <Link onClick={handleCloseDrawer} to="/bookmarks">
70 <Bookmarks className={cn(itemClass, "px-4")} />
71 </Link>
72 <ThemeSwitch
73 className={cn(itemClass, "px-4")}
74 onClick={handleCloseDrawer}
75 />
76 </div>
77 <div className="divider" />
78 </div>
79 <div className="bg-white dark:bg-gray-900">
80 <div className="divider" />
81 <Link onClick={handleCloseDrawer} to="/support">
82 <Support className={cn(itemClass, "px-4")} />
83 </Link>
84 <div className="divider" />
85 </div>
86 <div className="bg-white dark:bg-gray-900">
87 <div className="divider" />
88 <div className="hover:bg-gray-100 dark:hover:bg-gray-800">
89 <Logout
90 className={cn(itemClass, "px-4 py-3")}
91 onClick={handleCloseDrawer}
92 />
93 </div>
94 <div className="divider" />
95 </div>
96 </div>
97 </div>
98 );
99};
100
101export default MobileDrawerMenu;