leaflet.pub
a tool for shared writing and social publishing
cozylittle.house
1"use client";
2
3import { usePathname } from "next/navigation";
4import Link from "next/link";
5import { Header } from "components/PageHeader";
6import { Footer } from "components/ActionBar/Footer";
7import { DesktopNavigation } from "components/ActionBar/DesktopNavigation";
8import { MobileNavigation } from "components/ActionBar/MobileNavigation";
9import { MediaContents } from "components/Media";
10import { DashboardIdContext } from "components/PageLayouts/DashboardLayout";
11import { useIdentityData } from "components/IdentityProvider";
12
13const allTabs = [
14 { name: "Subs", href: "/reader", requiresAuth: true },
15 { name: "Trending", href: "/reader/hot", requiresAuth: false },
16 { name: "New", href: "/reader/new", requiresAuth: false },
17];
18
19export default function ReaderLayout({
20 children,
21}: {
22 children: React.ReactNode;
23}) {
24 const pathname = usePathname();
25 const { identity } = useIdentityData();
26 const isLoggedIn = !!identity?.atp_did;
27 const tabs = allTabs.filter((tab) => !tab.requiresAuth || isLoggedIn);
28
29 const isActive = (href: string) => {
30 if (href === "/reader") return pathname === "/reader" || pathname === "/";
31 if (
32 href === "/reader/hot" &&
33 !isLoggedIn &&
34 (pathname === "/reader" || pathname === "/")
35 )
36 return true;
37 return pathname.startsWith(href);
38 };
39
40 return (
41 <DashboardIdContext.Provider value="reader">
42 <div className="dashboard pwa-padding relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6">
43 <MediaContents mobile={false}>
44 <div className="flex flex-col gap-3 my-6">
45 <DesktopNavigation currentPage="reader" />
46 </div>
47 </MediaContents>
48 <div
49 className="w-full h-full flex flex-col gap-2 relative overflow-y-scroll pt-3 pb-3 px-3 sm:pt-8 sm:pb-3 sm:pl-6 sm:pr-4"
50 id="home-content"
51 >
52 <Header>
53 <div className="pubDashTabs flex flex-row gap-1">
54 {tabs.map((tab) => (
55 <Link key={tab.name} href={tab.href}>
56 <div
57 className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${
58 isActive(tab.href)
59 ? "text-accent-2 bg-accent-1 font-bold -mb-px"
60 : "text-tertiary"
61 }`}
62 >
63 {tab.name}
64 </div>
65 </Link>
66 ))}
67 </div>
68 <div className="sm:block grow" />
69 </Header>
70 {children}
71 </div>
72 <Footer>
73 <MobileNavigation currentPage="reader" />
74 </Footer>
75 </div>
76 </DashboardIdContext.Provider>
77 );
78}