leaflet.pub
a tool for shared writing and social publishing
schlage.town
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={identity?.publication_subscriptions?.length !== 0}
97 />
98 <DiscoverButton current={props.currentPage === "discover"} />
99
100 <hr className="border-border-light my-1" />
101 <PublicationButtons currentPubUri={thisPublication?.uri} />
102 </>
103 );
104};
105
106const HomeButton = (props: { current?: boolean }) => {
107 return (
108 <Link href={"/home"} className="hover:!no-underline">
109 <ActionButton
110 nav
111 icon={<HomeSmall />}
112 label="Home"
113 className={props.current ? "bg-bg-page! border-border-light!" : ""}
114 />
115 </Link>
116 );
117};
118
119const ReaderButton = (props: { current?: boolean; subs: boolean }) => {
120 let readerUnreads = false;
121
122 if (!props.subs) return;
123 return (
124 <Link href={"/reader"} className="hover:no-underline!">
125 <ActionButton
126 nav
127 icon={readerUnreads ? <ReaderUnreadSmall /> : <ReaderReadSmall />}
128 label="Reader"
129 className={`
130 ${readerUnreads && "text-accent-contrast!"}
131 ${props.current && "border-accent-contrast!"}
132 `}
133 />
134 </Link>
135 );
136};
137
138const DiscoverButton = (props: { current?: boolean }) => {
139 return (
140 <Link href={"/discover"} className="hover:no-underline!">
141 <ActionButton
142 nav
143 icon={<DiscoverSmall />}
144 label="Discover"
145 subtext=""
146 className={props.current ? "bg-bg-page! border-border-light!" : ""}
147 />
148 </Link>
149 );
150};