update: move drawer to its own component

webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import { theme } from "../../../theme";
+
+interface NamedRangesProps {
+  title?: string;
+  // Add props as needed for your use case
+}
+
+const NamedRanges: React.FC<NamedRangesProps> = ({ title = "Named Ranges" }) => {
+  return (
+    <Container>
+      <Content>
+        <h3>{title}</h3>
+        <p>This is the Named Ranges component.</p>
+        <p>You can customize this content based on your specific needs.</p>
+      </Content>
+      <Divider />
+      <Footer>
+        <FooterButton variant="contained" color="primary">
+          Save changes
+        </FooterButton>
+      </Footer>
+    </Container>
+  );
+};
+
+const Container = styled("div")({
+  padding: "16px",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+});
+
+const Content = styled("div")({
+  flex: 1,
+  color: theme.palette.grey[700],
+  lineHeight: "1.5",
+  
+  "& p": {
+    margin: "0 0 12px 0",
+  },
+});
+
+const Divider = styled("div")({
+  height: "1px",
+  width: "100%",
+  backgroundColor: theme.palette.grey[300],
+  margin: "0",
+});
+
+const Footer = styled("div")({
+  height: "40px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: "0 8px",
+  flexShrink: 0,
+});
+
+const FooterButton = styled(Button)({
+  width: "100%",
+});
+
+export default NamedRanges;

webapp/IronCalc/src/components/RightDrawer/RightDrawer.tsx

@@ -0,0 +1,157 @@
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+import Tooltip from "@mui/material/Tooltip";
+import { styled } from "@mui/material/styles";
+import { t } from "i18next";
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+import { theme } from "../../theme";
+import { TOOLBAR_HEIGHT } from "../constants";
+import NamedRanges from "./NamedRanges/NamedRanges";
+
+const DEFAULT_DRAWER_WIDTH = 300;
+
+interface RightDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  width?: number;
+  children?: ReactNode;
+  showCloseButton?: boolean;
+  backgroundColor?: string;
+  title?: string;
+}
+
+const RightDrawer = ({
+  isOpen,
+  onClose,
+  width = DEFAULT_DRAWER_WIDTH,
+  children,
+  showCloseButton = true,
+  title = "Right Drawer",
+}: RightDrawerProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <DrawerContainer $drawerWidth={width}>
+      {showCloseButton && (
+        <Header>
+          <HeaderTitle>
+            <HeaderBreadcrumbs separator="›">
+              <HeaderBreadcrumbLink href="/">{title}</HeaderBreadcrumbLink>
+              <HeaderBreadcrumbLink href="/">Catalog</HeaderBreadcrumbLink>
+            </HeaderBreadcrumbs>
+          </HeaderTitle>
+          <Tooltip
+            title={t("right_drawer.close")}
+            slotProps={{
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -8],
+                    },
+                  },
+                ],
+              },
+            }}
+          >
+            <CloseButton
+              onClick={onClose}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  onClose();
+                }
+              }}
+              aria-label="Close drawer"
+              tabIndex={0}
+            >
+              <X />
+            </CloseButton>
+          </Tooltip>
+        </Header>
+      )}
+      {children}
+      <Divider />
+      <DrawerContent>
+        <NamedRanges title={title} />
+      </DrawerContent>
+    </DrawerContainer>
+  );
+};
+
+type DrawerContainerProps = {
+  $drawerWidth: number;
+};
+const DrawerContainer = styled("div")<DrawerContainerProps>(
+  ({ $drawerWidth }) => ({
+    position: "absolute",
+    overflow: "hidden",
+    backgroundColor: theme.palette.common.white,
+    right: 0,
+    top: `${TOOLBAR_HEIGHT + 1}px`,
+    bottom: 0,
+    borderLeft: `1px solid ${theme.palette.grey[300]}`,
+    width: `${$drawerWidth}px`,
+    display: "flex",
+    flexDirection: "column",
+  }),
+);
+
+const Header = styled("div")({
+  height: "40px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: "0 8px",
+});
+
+const HeaderTitle = styled("div")({
+  width: "100%",
+});
+
+const HeaderBreadcrumbs = styled(Breadcrumbs)({
+  fontSize: "12px",
+  marginRight: "8px",
+  width: "100%",
+});
+
+const HeaderBreadcrumbLink = styled(Link)({
+  color: theme.palette.grey[900],
+  textDecoration: "none",
+});
+
+const CloseButton = styled("div")`
+    &:hover {
+      background-color: ${theme.palette.grey["50"]};
+    }
+    display: flex;
+    border-radius: 4px;
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: 16px;
+      height: 16px;
+      stroke-width: 1.5;
+    }
+  `;
+
+const Divider = styled("div")({
+  height: "1px",
+  width: "100%",
+  backgroundColor: theme.palette.grey[300],
+  margin: "0",
+});
+
+const DrawerContent = styled("div")({
+  flex: 1,
+  overflow: "auto",
+});
+
+
+export default RightDrawer;
+export { DEFAULT_DRAWER_WIDTH };

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

@@ -7,6 +7,7 @@ import type {
 import { styled } from "@mui/material/styles";
 import { useCallback, useEffect, useRef, useState } from "react";
 import FormulaBar from "../FormulaBar/FormulaBar";
+import RightDrawer, { DEFAULT_DRAWER_WIDTH } from "../RightDrawer/RightDrawer";
 import SheetTabBar from "../SheetTabBar";
 import Toolbar from "../Toolbar/Toolbar";
 import Worksheet from "../Worksheet/Worksheet";
@@ -699,7 +700,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           setDrawerOpen(true);
         }}
       />
-      <WorksheetAreaLeft $drawerWidth={isDrawerOpen ? DRAWER_WIDTH : 0}>
+      <WorksheetAreaLeft $drawerWidth={isDrawerOpen ? DEFAULT_DRAWER_WIDTH : 0}>
         <FormulaBar
           cellAddress={cellAddress()}
           formulaValue={formulaValue()}
@@ -767,25 +768,11 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           }}
         />
       </WorksheetAreaLeft>
-      <WorksheetAreaRight $drawerWidth={isDrawerOpen ? DRAWER_WIDTH : 0}>
+      <RightDrawer isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)} />
-        <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 }) => ({
@@ -796,18 +783,6 @@ const WorksheetAreaLeft = styled("div")<WorksheetAreaLeftProps>(
   }),
 );
 
-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/locale/en_us.json

@@ -142,5 +142,8 @@
     "default": "Default color",
     "no_fill": "No fill",
     "custom": "Custom"
+  },
+  "right_drawer": {
+    "close": "Close"
   }
 }