diff --git a/apps/client/src/features/share/atoms/shared-page-atom.ts b/apps/client/src/features/share/atoms/shared-page-atom.ts index 813f5e61b..edd0f7fa8 100644 --- a/apps/client/src/features/share/atoms/shared-page-atom.ts +++ b/apps/client/src/features/share/atoms/shared-page-atom.ts @@ -1,6 +1,11 @@ import { atom } from "jotai"; +import { atomWithStorage } from "jotai/utils"; import { ISharedPageTree } from "@/features/share/types/share.types"; import { SharedPageTreeNode } from "@/features/share/utils"; export const sharedPageTreeAtom = atom(null); -export const sharedTreeDataAtom = atom(null); \ No newline at end of file +export const sharedTreeDataAtom = atom(null); +export const sharedPageFullWidthAtom = atomWithStorage( + "shared-page-full-width", + false, +); \ No newline at end of file diff --git a/apps/client/src/features/share/components/share-shell.tsx b/apps/client/src/features/share/components/share-shell.tsx index bba226fe7..e59d41317 100644 --- a/apps/client/src/features/share/components/share-shell.tsx +++ b/apps/client/src/features/share/components/share-shell.tsx @@ -14,7 +14,11 @@ import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts"; import { ThemeToggle } from "@/components/theme-toggle.tsx"; import { useAtomValue, useSetAtom } from "jotai"; import { useAtom } from "jotai"; -import { sharedPageTreeAtom, sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom"; +import { + sharedPageFullWidthAtom, + sharedPageTreeAtom, + sharedTreeDataAtom, +} from "@/features/share/atoms/shared-page-atom"; import { buildSharedPageTree } from "@/features/share/utils"; import { desktopSidebarAtom, @@ -27,7 +31,7 @@ import { mobileTableOfContentAsideAtom, tableOfContentAsideAtom, } from "@/features/share/atoms/sidebar-atom.ts"; -import { IconList } from "@tabler/icons-react"; +import { IconArrowsHorizontal, IconList } from "@tabler/icons-react"; import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts"; import classes from "./share.module.css"; import { @@ -55,6 +59,7 @@ export default function ShareShell({ const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom); const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom); const toggleToc = useToggleToc(tableOfContentAsideAtom); + const [fullWidth, setFullWidth] = useAtom(sharedPageFullWidthAtom); const { shareId } = useParams(); const { data } = useGetSharedPageTreeQuery(shareId); @@ -166,6 +171,20 @@ export default function ShareShell({ + + + setFullWidth((v) => !v)} + visibleFrom="sm" + size="sm" + > + + + diff --git a/apps/client/src/pages/share/shared-page.tsx b/apps/client/src/pages/share/shared-page.tsx index 0db817f60..f156208e5 100644 --- a/apps/client/src/pages/share/shared-page.tsx +++ b/apps/client/src/pages/share/shared-page.tsx @@ -9,7 +9,10 @@ import { extractPageSlugId } from "@/lib"; import { Error404 } from "@/components/ui/error-404.tsx"; import ShareBranding from "@/features/share/components/share-branding.tsx"; import { useAtomValue } from "jotai"; -import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom.ts"; +import { + sharedPageFullWidthAtom, + sharedTreeDataAtom, +} from "@/features/share/atoms/shared-page-atom.ts"; import { isPageInTree } from "@/features/share/utils.ts"; export default function SharedPage() { @@ -23,6 +26,7 @@ export default function SharedPage() { }); const sharedTreeData = useAtomValue(sharedTreeDataAtom); + const fullWidth = useAtomValue(sharedPageFullWidthAtom); useEffect(() => { if (shareId && data) { @@ -59,7 +63,7 @@ export default function SharedPage() { )} - +