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";
14
15export type navPages = "home" | "reader" | "pub" | "discover";
16
17export const DesktopNavigation = (props: {
18 currentPage: navPages;
19 publication?: string;
20}) => {
21 return (
22 <div className="flex flex-col gap-4">
23 <Sidebar alwaysOpen>
24 <NavigationOptions
25 currentPage={props.currentPage}
26 publication={props.publication}
27 />
28 </Sidebar>
29 {/*<Sidebar alwaysOpen>
30 <ActionButton
31 icon={
32 unreadNotifications ? (
33 <NotificationsUnreadSmall />
34 ) : (
35 <NotificationsReadSmall />
36 )
37 }
38 label="Notifications"
39 />
40 </Sidebar>*/}
41 </div>
42 );
43};
44
45export const MobileNavigation = (props: {
46 currentPage: navPages;
47 publication?: string;
48}) => {
49 let { identity } = useIdentityData();
50 let thisPublication = identity?.publications?.find(
51 (pub) => pub.uri === props.publication,
52 );
53 return (
54 <Popover
55 onOpenAutoFocus={(e) => e.preventDefault()}
56 asChild
57 className="px-2! !max-w-[256px]"
58 trigger={
59 <div className="shrink-0 p-1 pr-2 text-accent-contrast h-full flex gap-2 font-bold items-center">
60 <MenuSmall />
61 <div className="truncate max-w-[72px]">
62 {props.currentPage === "home" ? (
63 <>Home</>
64 ) : props.currentPage === "reader" ? (
65 <>Reader</>
66 ) : props.currentPage === "discover" ? (
67 <>Discover</>
68 ) : props.currentPage === "pub" ? (
69 thisPublication && <>{thisPublication.name}</>
70 ) : null}
71 </div>
72 </div>
73 }
74 >
75 <NavigationOptions
76 currentPage={props.currentPage}
77 publication={props.publication}
78 />
79 </Popover>
80 );
81};
82
83const NavigationOptions = (props: {
84 currentPage: navPages;
85 publication?: string;
86}) => {
87 let { identity } = useIdentityData();
88 let thisPublication = identity?.publications?.find(
89 (pub) => pub.uri === props.publication,
90 );
91 return (
92 <>
93 <HomeButton current={props.currentPage === "home"} />
94 <ReaderButton
95 current={props.currentPage === "reader"}
96 subs={
97 identity?.publication_subscriptions?.length !== 0 &&
98 identity?.publication_subscriptions?.length !== undefined
99 }
100 />
101 <DiscoverButton current={props.currentPage === "discover"} />
102
103 <hr className="border-border-light my-1" />
104 <PublicationButtons currentPubUri={thisPublication?.uri} />
105 </>
106 );
107};
108
109const HomeButton = (props: { current?: boolean }) => {
110 return (
111 <Link href={"/home"} className="hover:!no-underline">
112 <ActionButton
113 nav
114 icon={<HomeSmall />}
115 label="Home"
116 className={props.current ? "bg-bg-page! border-border-light!" : ""}
117 />
118 </Link>
119 );
120};
121
122const ReaderButton = (props: { current?: boolean; subs: boolean }) => {
123 let readerUnreads = false;
124
125 if (!props.subs) return;
126 return (
127 <Link href={"/reader"} className="hover:no-underline!">
128 <ActionButton
129 nav
130 icon={readerUnreads ? <ReaderUnreadSmall /> : <ReaderReadSmall />}
131 label="Reader"
132 className={`
133 ${readerUnreads && "text-accent-contrast!"}
134 ${props.current && "border-accent-contrast!"}
135 `}
136 />
137 </Link>
138 );
139};
140
141const DiscoverButton = (props: { current?: boolean }) => {
142 return (
143 <Link href={"/discover"} className="hover:no-underline!">
144 <ActionButton
145 nav
146 icon={<DiscoverSmall />}
147 label="Discover"
148 subtext=""
149 className={props.current ? "bg-bg-page! border-border-light!" : ""}
150 />
151 </Link>
152 );
153};