diff --git a/webapp/src/components/SheetTabBar/SheetTab.tsx b/webapp/src/components/SheetTabBar/SheetTab.tsx index 88c9919..831ba77 100644 --- a/webapp/src/components/SheetTabBar/SheetTab.tsx +++ b/webapp/src/components/SheetTabBar/SheetTab.tsx @@ -1,4 +1,4 @@ -import { Button, Menu, MenuItem, styled } from "@mui/material"; +import { Button, Menu, MenuItem, MenuItemProps, styled } from "@mui/material"; import { ChevronDown } from "lucide-react"; import { useRef, useState } from "react"; import { theme } from "../../theme"; @@ -14,6 +14,7 @@ interface SheetTabProps { onSelected: () => void; onColorChanged: (hex: string) => void; onRenamed: (name: string) => void; + canDelete: () => boolean; onDeleted: () => void; workbookState: WorkbookState; } @@ -92,6 +93,7 @@ function SheetTab(props: SheetTabProps) { Change Color { props.onDeleted(); handleClose(); @@ -137,16 +139,20 @@ const StyledMenu = styled(Menu)` } `; -const StyledMenuItem = styled(MenuItem)` - display: flex; - justify-content: space-between; - font-size: 12px; - width: calc(100% - 8px); - margin: 0px 4px; - border-radius: 4px; - padding: 8px; - height: 32px; -`; +const StyledMenuItem = styled(MenuItem)(({}) => ({ + display: "flex", + justifyContent: "space-between", + fontSize: "12px", + width: "calc(100% - 8px)", + margin: "0px 4px", + borderRadius: "4px", + padding: "8px", + height: "32px", + '&:disabled': { + color: "#BDBDBD", + } +})); + const TabWrapper = styled("div")<{ $color: string; $selected: boolean }>` display: flex; diff --git a/webapp/src/components/SheetTabBar/SheetTabBar.tsx b/webapp/src/components/SheetTabBar/SheetTabBar.tsx index 5f60672..30703bf 100644 --- a/webapp/src/components/SheetTabBar/SheetTabBar.tsx +++ b/webapp/src/components/SheetTabBar/SheetTabBar.tsx @@ -67,6 +67,9 @@ function SheetTabBar(props: SheetTabBarProps) { onRenamed={(name: string): void => { props.onSheetRenamed(name); }} + canDelete={(): boolean => { + return sheets.length > 1; + }} onDeleted={(): void => { props.onSheetDeleted(); }}