WIP

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -149,6 +149,11 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
 
   return (
     <>
+      {props.isShare && (
+        <Text mb="md" fw={500}>
+          {t("Table of contents")}
+        </Text>
+      )}
       <div className={props.isShare ? classes.leftBorder : ""}>
         {links.map((item, idx) => (
           <Box<"button">

apps/client/src/features/editor/readonly-page-editor.tsx

@@ -61,6 +61,7 @@ export default function ReadonlyPageEditor({
           }
         }}
       ></EditorProvider>
+      <div style={{ paddingBottom: "20vh" }}></div>
     </>
   );
 }

apps/client/src/features/share/atoms/sidebar-atom.ts

@@ -1,5 +1,5 @@
 import { atomWithWebStorage } from "@/lib/jotai-helper.ts";
-import { atom } from 'jotai/index';
+import { atom } from 'jotai';
 
 export const tableOfContentAsideAtom = atomWithWebStorage<boolean>(
   "showTOC",
@@ -7,7 +7,3 @@ export const tableOfContentAsideAtom = atomWithWebStorage<boolean>(
 );
 
 export const mobileTableOfContentAsideAtom = atom<boolean>(false);
-
-
-
-const sidebarWidthAtom = atomWithWebStorage<number>('sidebarWidth', 300);

apps/client/src/features/share/components/share-shell.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {
+  ActionIcon,
   Affix,
   AppShell,
   Button,
@@ -27,6 +28,8 @@ import {
   mobileTableOfContentAsideAtom,
   tableOfContentAsideAtom,
 } from "@/features/share/atoms/sidebar-atom.ts";
+import { IconList } from "@tabler/icons-react";
+import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
 
 const MemoizedSharedTree = React.memo(SharedTree);
 
@@ -43,6 +46,8 @@ export default function ShareShell({
 
   const [tocOpened] = useAtom(tableOfContentAsideAtom);
   const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
+  const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
+  const toggleToc = useToggleToc(tableOfContentAsideAtom);
 
   const { shareId } = useParams();
   const { data } = useGetSharedPageTreeQuery(shareId);
@@ -61,16 +66,16 @@ export default function ShareShell({
       }}
       aside={{
         width: 300,
-        breakpoint: "md",
+        breakpoint: "sm",
         collapsed: {
-          mobile: mobileTocOpened,
+          mobile: !mobileTocOpened,
-          desktop: tocOpened,
+          desktop: !tocOpened,
         },
       }}
       padding="md"
     >
       <AppShell.Header>
-        <Group wrap="nowrap" justify="space-between" p="sm">
+        <Group wrap="nowrap" justify="space-between" py="sm" px="xl">
           <Group>
             {data?.pageTree?.length > 0 && (
               <>
@@ -97,6 +102,32 @@ export default function ShareShell({
             )}
           </Group>
           <Group>
+            <>
+              <Tooltip label={t("Table of contents")} withArrow>
+                <ActionIcon
+                  variant="default"
+                  style={{ border: "none" }}
+                  onClick={toggleTocMobile}
+                  hiddenFrom="sm"
+                  size="sm"
+                >
+                  <IconList size={20} stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+
+              <Tooltip label={t("Table of contents")} withArrow>
+                <ActionIcon
+                  variant="default"
+                  style={{ border: "none" }}
+                  onClick={toggleToc}
+                  visibleFrom="sm"
+                  size="sm"
+                >
+                  <IconList size={20} stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            </>
+
             <ThemeToggle />
           </Group>
         </Group>
@@ -124,10 +155,6 @@ export default function ShareShell({
       </AppShell.Main>
 
       <AppShell.Aside p="md" withBorder={false}>
-        <Text mb="md" fw={500}>
-          Table of contents
-        </Text>
-
         <ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll">
           <div style={{ paddingBottom: "50px" }}>
             {readOnlyEditor && (

apps/client/src/features/share/hooks/use-toggle-toc.ts

@@ -0,0 +1,8 @@
+import { useAtom } from "jotai";
+
+export function useToggleToc(tocAtom: any) {
+  const [tocState, setTocState] = useAtom(tocAtom);
+  return () => {
+    setTocState(!tocState);
+  }
+}