show hide thumbnails

ui2/src/components/Viewer/Pages.module.css

@@ -9,5 +9,4 @@
     padding: 1rem 1rem 0rem 1rem;
     width: 600px;
   }
-  margin-left: 1rem;
 }

ui2/src/components/Viewer/Thumbnails.tsx

@@ -7,6 +7,7 @@ import PanelContext from "@/contexts/PanelContext"
 import type {PanelMode} from "@/types"
 import {RootState} from "@/app/types"
 import Thumbnail from "./Thumbnail"
+import ThumbnailsToggle from "./ThumbnailsToggle"
 import classes from "./Thumbnails.module.css"
 
 export default function Thumbnails() {
@@ -22,6 +23,7 @@ export default function Thumbnails() {
   return (
     <Stack className={classes.thumbnails} justify="flex-start">
       {thumbnails}
+      <ThumbnailsToggle />
     </Stack>
   )
 }

ui2/src/components/Viewer/ThumbnailsToggle.module.css

@@ -0,0 +1,4 @@
+.thumbnailsToggle {
+  background-color: #666;
+  color: white;
+}

ui2/src/components/Viewer/ThumbnailsToggle.tsx

@@ -0,0 +1,17 @@
+import {UnstyledButton, Flex} from "@mantine/core"
+import {IconMenu2} from "@tabler/icons-react"
+import classes from "./ThumbnailsToggle.module.css"
+
+export default function ThumbnailsToggle() {
+  const onClick = () => {
+    console.log("Thumbnails toggled")
+  }
+
+  return (
+    <Flex align-items={"flex-start"} className={classes.thumbnailsToggle}>
+      <UnstyledButton onClick={() => onClick()}>
+        <IconMenu2 />
+      </UnstyledButton>
+    </Flex>
+  )
+}

ui2/src/components/Viewer/Viewer.module.css

@@ -0,0 +1,3 @@
+.inner {
+  outline: 1px solid #ccc;
+}

ui2/src/components/Viewer/Viewer.tsx

@@ -14,8 +14,10 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import PanelContext from "@/contexts/PanelContext"
 import {selectContentHeight} from "@/slices/sizes"
 import ActionButtons from "./ActionButtons"
+import ThumbnailsToggle from "./ThumbnailsToggle"
 import Pages from "./Pages"
 import Thumbnails from "./Thumbnails"
+import classes from "./Viewer.module.css"
 
 export default function Viewer() {
   const mode: PanelMode = useContext(PanelContext)
@@ -52,8 +54,9 @@ export default function Viewer() {
     <div>
       <ActionButtons />
       <Breadcrumbs onClick={onClick} />
-      <Flex style={{height: `${height}px`}}>
+      <Flex className={classes.inner} style={{height: `${height}px`}}>
         <Thumbnails />
+        <ThumbnailsToggle />
         <Pages />
       </Flex>
     </div>