leaflet.pub
a tool for shared writing and social publishing
cozylittle.house
1import { HomeSmall } from "components/Icons/HomeSmall";
2import { ActionButton } from "./ActionButton";
3import { Sidebar } from "./Sidebar";
4import { useIdentityData } from "components/IdentityProvider";
5import Link from "next/link";
6import { DiscoverSmall } from "components/Icons/DiscoverSmall";
7import { PublicationButtons } from "./Publications";
8import { Popover } from "components/Popover";
9import { MenuSmall } from "components/Icons/MenuSmall";
10import {
11 ReaderReadSmall,
12 ReaderUnreadSmall,
13} from "components/Icons/ReaderSmall";
14import {
15 NotificationsReadSmall,
16 NotificationsUnreadSmall,
17} from "components/Icons/NotificationSmall";
18import { SpeedyLink } from "components/SpeedyLink";
19import { Separator } from "components/Layout";
20
21export type navPages =
22 | "home"
23 | "reader"
24 | "pub"
25 | "discover"
26 | "notifications"
27 | "looseleafs"
28 | "tag";
29
30export const DesktopNavigation = (props: {
31 currentPage: navPages;
32 publication?: string;
33}) => {
34 let { identity } = useIdentityData();
35 return (
36 <div className="flex flex-col gap-3">
37 <Sidebar alwaysOpen>
38 <NavigationOptions
39 currentPage={props.currentPage}
40 publication={props.publication}
41 />
42 </Sidebar>
43 {identity?.atp_did && (
44 <Sidebar alwaysOpen>
45 <NotificationButton current={props.currentPage === "notifications"} />
46 </Sidebar>
47 )}
48 </div>
49 );
50};
51
52export const MobileNavigation = (props: {
53 currentPage: navPages;
54 publication?: string;
55}) => {
56 let { identity } = useIdentityData();
57
58 return (
59 <div className="flex gap-1 ">
60 <Popover
61 onOpenAutoFocus={(e) => e.preventDefault()}
62 asChild
63 className="px-2! !max-w-[256px]"
64 trigger={
65 <div className="shrink-0 p-1 text-accent-contrast h-full flex gap-2 font-bold items-center">
66 <MenuSmall />
67 </div>
68 }
69 >
70 <NavigationOptions
71 currentPage={props.currentPage}
72 publication={props.publication}
73 isMobile
74 />
75 </Popover>
76 {identity?.atp_did && (
77 <>
78 <Separator />
79 <NotificationButton />
80 </>
81 )}
82 </div>
83 );
84};
85
86const NavigationOptions = (props: {
87 currentPage: navPages;
88 publication?: string;
89 isMobile?: boolean;
90}) => {
91 let { identity } = useIdentityData();
92 let thisPublication = identity?.publications?.find(
93 (pub) => pub.uri === props.publication,
94 );
95 return (
96 <>
97 <HomeButton current={props.currentPage === "home"} />
98 <ReaderButton
99 current={props.currentPage === "reader"}
100 subs={
101 identity?.publication_subscriptions?.length !== 0 &&
102 identity?.publication_subscriptions?.length !== undefined
103 }
104 />
105 <DiscoverButton current={props.currentPage === "discover"} />
106
107 <hr className="border-border-light my-1" />
108 <PublicationButtons
109 currentPage={props.currentPage}
110 currentPubUri={thisPublication?.uri}
111 />
112 </>
113 );
114};
115
116const HomeButton = (props: { current?: boolean }) => {
117 return (
118 <SpeedyLink href={"/home"} className="hover:!no-underline">
119 <ActionButton
120 nav
121 icon={<HomeSmall />}
122 label="Home"
123 className={props.current ? "bg-bg-page! border-border-light!" : ""}
124 />
125 </SpeedyLink>
126 );
127};
128
129const ReaderButton = (props: { current?: boolean; subs: boolean }) => {
130 if (!props.subs) return;
131 return (
132 <SpeedyLink href={"/reader"} className="hover:no-underline!">
133 <ActionButton
134 nav
135 icon={<ReaderUnreadSmall />}
136 label="Reader"
137 className={props.current ? "bg-bg-page! border-border-light!" : ""}
138 />
139 </SpeedyLink>
140 );
141};
142
143const DiscoverButton = (props: { current?: boolean }) => {
144 return (
145 <Link href={"/discover"} className="hover:no-underline!">
146 <ActionButton
147 nav
148 icon={<DiscoverSmall />}
149 label="Discover"
150 subtext=""
151 className={props.current ? "bg-bg-page! border-border-light!" : ""}
152 />
153 </Link>
154 );
155};
156
157export function NotificationButton(props: { current?: boolean }) {
158 let { identity } = useIdentityData();
159 let unreads = identity?.notifications[0]?.count;
160
161 return (
162 <SpeedyLink href={"/notifications"} className="hover:no-underline!">
163 <ActionButton
164 nav
165 labelOnMobile={false}
166 icon={
167 unreads ? (
168 <NotificationsUnreadSmall className="text-accent-contrast" />
169 ) : (
170 <NotificationsReadSmall />
171 )
172 }
173 label="Notifications"
174 className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`}
175 />
176 </SpeedyLink>
177 );
178}