chrone: sperate client and server to different repos.

src/containers/FinancialStatements/FinancialStatementHeader.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { Position, Drawer } from '@blueprintjs/core';
+import 'style/containers/FinancialStatements/DrawerHeader.scss';
+
+export default function FinancialStatementHeader({
+  children,
+  isOpen,
+  drawerProps,
+}) {
+  const timeoutRef = React.useRef();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  // Hides the content scrollbar and scroll to the top of the page once the drawer open.
+  useEffect(() => {
+    const contentPanel = document.querySelector('body');
+    contentPanel.classList.toggle('hide-scrollbar', isOpen);
+
+    if (isOpen) {
+      document.querySelector('.Pane2').scrollTo(0, 0);
+    }
+    return () => {
+      contentPanel.classList.remove('hide-scrollbar');
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    clearTimeout(timeoutRef.current);
+
+    if (isOpen) {
+      setIsDrawerOpen(isOpen);
+    } else {
+      timeoutRef.current = setTimeout(() => setIsDrawerOpen(isOpen), 300);
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      className={classNames(
+        'financial-statement__header',
+        'financial-header-drawer',
+        {
+          'is-hidden': !isDrawerOpen,
+        },
+      )}
+    >
+      <Drawer
+        isOpen={isOpen}
+        usePortal={false}
+        hasBackdrop={true}
+        position={Position.TOP}
+        canOutsideClickClose={true}
+        canEscapeKeyClose={true}
+        {...drawerProps}
+      >
+        {children}
+      </Drawer>
+    </div>
+  );
+}