UPDATE: WIP

webapp/IronCalc/src/components/Toolbar/Toolbar.tsx

@@ -24,6 +24,7 @@ import {
   Grid2x2Check,
   Grid2x2X,
   ImageDown,
+  Inbox,
   Italic,
   Minus,
   PaintBucket,
@@ -90,6 +91,7 @@ type ToolbarProperties = {
   showGridLines: boolean;
   onToggleShowGridLines: (show: boolean) => void;
   nameManagerProperties: NameManagerProperties;
+  openDrawer: () => void;
 };
 
 function Toolbar(properties: ToolbarProperties) {
@@ -541,6 +543,19 @@ function Toolbar(properties: ToolbarProperties) {
               <ImageDown />
             </StyledButton>
           </Tooltip>
+
+          <Tooltip title={t("toolbar.open_drawer")}>
+            <StyledButton
+              type="button"
+              $pressed={false}
+              onClick={() => {
+                properties.openDrawer();
+              }}
+              disabled={!canEdit}
+            >
+              <Inbox />
+            </StyledButton>
+          </Tooltip>
         </ButtonGroup>
 
         <ColorPicker

webapp/IronCalc/src/components/Workbook/Workbook.tsx

@@ -22,6 +22,7 @@ import {
   CLIPBOARD_ID_SESSION_STORAGE_KEY,
   getNewClipboardId,
 } from "../clipboard";
+import { TOOLBAR_HEIGHT } from "../constants";
 import {
   type NavigationKey,
   getCellAddress,
@@ -41,6 +42,8 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
   // This is needed because `model` or `workbookState` can change without React being aware of it
   const setRedrawId = useState(0)[1];
 
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+
   const worksheets = model.getWorksheetsProperties();
   const info = worksheets.map(
     ({ name, color, sheet_id, state }: WorksheetProperties) => {
@@ -692,7 +695,11 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           worksheets,
           definedNameList: model.getDefinedNameList(),
         }}
+        openDrawer={() => {
+          setDrawerOpen(true);
+        }}
       />
+      <WorksheetAreaLeft $drawerWidth={isDrawerOpen ? DRAWER_WIDTH : 0}>
         <FormulaBar
           cellAddress={cellAddress()}
           formulaValue={formulaValue()}
@@ -759,10 +766,48 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
             setRedrawId((value) => value + 1);
           }}
         />
+      </WorksheetAreaLeft>
+      <WorksheetAreaRight $drawerWidth={isDrawerOpen ? DRAWER_WIDTH : 0}>
+        <span
+          onClick={() => setDrawerOpen(false)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setDrawerOpen(false);
+            }
+          }}
+          aria-label="Close drawer"
+        >
+          x
+        </span>
+      </WorksheetAreaRight>
     </Container>
   );
 };
 
+const DRAWER_WIDTH = 300;
+
+type WorksheetAreaLeftProps = { $drawerWidth: number };
+const WorksheetAreaLeft = styled("div")<WorksheetAreaLeftProps>(
+  ({ $drawerWidth }) => ({
+    position: "absolute",
+    top: `${TOOLBAR_HEIGHT + 1}px`,
+    width: `calc(100% - ${$drawerWidth}px)`,
+    height: `calc(100% - ${TOOLBAR_HEIGHT + 1}px)`,
+  }),
+);
+
+const WorksheetAreaRight = styled("div")<WorksheetAreaLeftProps>(
+  ({ $drawerWidth }) => ({
+    position: "absolute",
+    overflow: "hidden",
+    backgroundColor: "red",
+    right: 0,
+    top: `${TOOLBAR_HEIGHT + 1}px`,
+    bottom: 0,
+    width: `${$drawerWidth}px`,
+  }),
+);
+
 const Container = styled("div")`
   display: flex;
   flex-direction: column;

webapp/IronCalc/src/components/Worksheet/Worksheet.tsx

@@ -18,11 +18,7 @@ import {
   outlineColor,
 } from "../WorksheetCanvas/constants";
 import WorksheetCanvas from "../WorksheetCanvas/worksheetCanvas";
-import {
+import { FORMULA_BAR_HEIGHT, NAVIGATION_HEIGHT } from "../constants";
-  FORMULA_BAR_HEIGHT,
-  NAVIGATION_HEIGHT,
-  TOOLBAR_HEIGHT,
-} from "../constants";
 import type { Cell } from "../types";
 import type { WorkbookState } from "../workbookState";
 import CellContextMenu from "./CellContextMenu";
@@ -459,7 +455,7 @@ const SheetContainer = styled("div")`
 const Wrapper = styled("div")({
   position: "absolute",
   overflow: "scroll",
-  top: TOOLBAR_HEIGHT + FORMULA_BAR_HEIGHT + 1,
+  top: FORMULA_BAR_HEIGHT + 1,
   left: 0,
   right: 0,
   bottom: NAVIGATION_HEIGHT + 1,