update: Add a left drawer to improve workbook management (#453)

* 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

webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/DrawerHeader.tsx

@@ -0,0 +1,98 @@
+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;