f2da24326b
* update: add leftbar to app * style: a few cosmetic changes * update: allow pinning workbooks * style: show ellipsis button only on hover * update: add basic responsiveness * style: use active state when file and help menus are open * style: increase transition time * update: allow duplication of workbooks * chore: standardize menus
99 lines
1.9 KiB
TypeScript
99 lines
1.9 KiB
TypeScript
import styled from "@emotion/styled";
|
|
import { IronCalcIconWhite as IronCalcIcon } from "@ironcalc/workbook";
|
|
import { IconButton, Tooltip } from "@mui/material";
|
|
import { Plus } from "lucide-react";
|
|
import { DialogHeaderLogoWrapper } from "../WelcomeDialog/WelcomeDialog";
|
|
|
|
interface DrawerHeaderProps {
|
|
onNewModel: () => void;
|
|
}
|
|
|
|
function DrawerHeader({ onNewModel }: DrawerHeaderProps) {
|
|
return (
|
|
<HeaderContainer>
|
|
<LogoWrapper>
|
|
<Logo>
|
|
<IronCalcIcon />
|
|
</Logo>
|
|
<Title>IronCalc</Title>
|
|
</LogoWrapper>
|
|
<Tooltip
|
|
title="New workbook"
|
|
slotProps={{
|
|
popper: {
|
|
modifiers: [
|
|
{
|
|
name: "offset",
|
|
options: {
|
|
offset: [0, -8],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
}}
|
|
>
|
|
<AddButton onClick={onNewModel}>
|
|
<PlusIcon />
|
|
</AddButton>
|
|
</Tooltip>
|
|
</HeaderContainer>
|
|
);
|
|
}
|
|
|
|
const HeaderContainer = styled("div")`
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 8px 12px 16px;
|
|
justify-content: space-between;
|
|
max-height: 60px;
|
|
min-height: 60px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 1px 0 0 #e0e0e0;
|
|
`;
|
|
|
|
const LogoWrapper = styled("div")`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
`;
|
|
|
|
const Title = styled("h1")`
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
`;
|
|
|
|
const Logo = styled(DialogHeaderLogoWrapper)`
|
|
transform: none;
|
|
margin-bottom: 0px;
|
|
padding: 6px;
|
|
`;
|
|
|
|
const AddButton = styled(IconButton)`
|
|
margin-left: 8px;
|
|
height: 32px;
|
|
width: 32px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
|
|
svg {
|
|
stroke-width: 2px;
|
|
stroke: #757575;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
&:hover {
|
|
background-color: #E0E0E0;
|
|
}
|
|
&:active {
|
|
background-color: #BDBDBD;
|
|
}
|
|
`;
|
|
|
|
const PlusIcon = styled(Plus)`
|
|
width: 16px;
|
|
height: 16px;
|
|
`;
|
|
|
|
export default DrawerHeader;
|