leaflet.pub
a tool for shared writing and social publishing
awarm.space
1import { useIdentityData } from "components/IdentityProvider";
2import { Separator } from "components/Layout";
3import {
4 navPages,
5 NotificationButton,
6 ReaderButton,
7 WriterButton,
8} from "./NavigationButtons";
9import { PublicationNavigation } from "./PublicationNavigation";
10import { LoginActionButton } from "components/LoginButton";
11import { ProfileButton } from "./ProfileButton";
12
13export const MobileNavigation = (props: {
14 currentPage: navPages;
15 currentPublicationUri?: string;
16 currentProfileDid?: string;
17}) => {
18 let { identity } = useIdentityData();
19
20 let compactOnMobile =
21 props.currentPage === "home" ||
22 props.currentPage === "looseleafs" ||
23 props.currentPage === "pub";
24
25 return (
26 <div
27 className={`mobileFooter w-full flex gap-4 px-1 text-secondary grow items-center justify-between`}
28 >
29 <div className="mobileNav flex gap-2 items-center justify-start min-w-0">
30 <ReaderButton
31 compactOnMobile={compactOnMobile}
32 current={props.currentPage === "reader"}
33 subs={
34 identity?.publication_subscriptions?.length !== 0 &&
35 identity?.publication_subscriptions?.length !== undefined
36 }
37 />
38 <WriterButton
39 compactOnMobile={compactOnMobile}
40 currentPage={props.currentPage}
41 currentPubUri={props.currentPublicationUri}
42 />
43
44 {compactOnMobile && (
45 <>
46 <PublicationNavigation
47 currentPage={props.currentPage}
48 currentPubUri={props.currentPublicationUri}
49 />
50 </>
51 )}
52 </div>
53 {identity?.atp_did ? (
54 <div className="flex gap-2">
55 <NotificationButton />
56 <ProfileButton />
57 </div>
58 ) : (
59 <LoginActionButton />
60 )}
61 </div>
62 );
63};