I am currently working on developing a page that features a book layout. This page will include tabs that users can expand individually.
If you would like to see a working example, you can check out this link: https://codesandbox.io/s/book-layout-l28gh?file=/src/App.js:0-1419
import { useState } from "react";
const dataset = [
{ name: "A section", description: "page A" },
{ name: "B section", description: "page B" },
{ name: "C section with long title", description: "page C" },
{ name: "D section", description: "page D" }
];
export default function App() {
return <Page />;
}
function Page({}) {
const [openSection, setOpenSection] = useState(0);
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh"
}}
>
{dataset.map((datum, i) => {
const { name } = datum;
const isOpen = i === openSection;
return (
<div
key={name}
style={{
height: "100%",
backgroundColor: isOpen ? "white" : "lightgray",
border: `1px solid ${isOpen ? "white" : "black"}`,
padding: 10,
flex: 1,
flexGrow: isOpen ? 1 : 0,
transition: "all 2s ease"
}}
>
<div
style={{
cursor: "pointer",
writingMode: isOpen ? "horizontal-tb" : "vertical-rl",
transition: "all 2s ease"
}}
onClick={() => setOpenSection(i)}
>
{name}
</div>
</div>
);
})}
</div>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>If you test it, you may encounter a few issues:
- When you expand a section, the title does not smoothly transition from vertical to horizontal. It should rotate smoothly.
- There is an inconsistency where, at times, when you click on a title, all the cards seem to move closer together.
- There is a request to make the grey area clickable, but there is a clear issue when it is opened.
What could be the cause of these problems? Is there a better method to implement a layout like this?