a tool for shared writing and social publishing
handle theme button on mobile
+41
-3
+2
app/[doc_id]/page.tsx
+2
app/[doc_id]/page.tsx
···
5
5
import { SelectionManager } from "components/SelectionManager";
6
6
import { Cards } from "components/Cards";
7
7
import { ThemeProvider } from "components/ThemeManager/ThemeProvider";
8
+
import { MobileFooter } from "components/MobileFooter";
8
9
9
10
export const preferredRegion = ["sfo1"];
10
11
export const dynamic = "force-dynamic";
···
30
31
>
31
32
<Cards rootCard={props.params.doc_id} />
32
33
</div>
34
+
<MobileFooter entityID={props.params.doc_id} />
33
35
</ThemeProvider>
34
36
</ReplicacheProvider>
35
37
);
+3
-2
components/Cards.tsx
+3
-2
components/Cards.tsx
···
4
4
import useMeasure from "react-use-measure";
5
5
import { elementId } from "src/utils/elementId";
6
6
import { ThemePopover } from "./ThemeManager/ThemeSetter";
7
+
import { Media } from "./Media";
7
8
8
9
export function Cards(props: { rootCard: string }) {
9
10
let cards = useUIState((s) => s.openCards);
···
15
16
className="flex justify-end items-start"
16
17
style={{ width: `calc((100vw - ${cardWidth}px)/2)` }}
17
18
>
18
-
<div className="flex flex-col gap-2 mr-4 mt-2">
19
+
<Media mobile={false} className="flex flex-col gap-2 mr-4 mt-2">
19
20
<PageOptions entityID={props.rootCard} />
20
-
</div>
21
+
</Media>
21
22
</div>
22
23
<Card entityID={props.rootCard} first />
23
24
{cards.map((card, index) => (
+21
components/Media.tsx
+21
components/Media.tsx
···
1
+
import { useIsInitialRender, useIsMobile } from "src/hooks/isMobile";
2
+
3
+
export function Media(props: {
4
+
mobile: boolean;
5
+
children: React.ReactNode;
6
+
className: string;
7
+
}) {
8
+
let initialRender = useIsInitialRender();
9
+
let isMobile = useIsMobile();
10
+
if (initialRender)
11
+
return (
12
+
<div
13
+
className={`${props.mobile ? "sm:hidden" : "hidden sm:block"} ${props.className}`}
14
+
>
15
+
{props.children}
16
+
</div>
17
+
);
18
+
if ((isMobile && props.mobile) || (!isMobile && !props.mobile))
19
+
return <div className={props.className}>{props.children}</div>;
20
+
return null;
21
+
}