feat(admin): make the left navigation bar collapsable (#10774)

packages/frontend/admin/src/modules/header.tsx

@@ -0,0 +1,81 @@
+import { SidebarIcon } from '@blocksuite/icons/rc';
+import { CheckIcon, XIcon } from 'lucide-react';
+
+import { Button } from '../components/ui/button';
+import { Separator } from '../components/ui/separator';
+import { useMediaQuery } from './common';
+import { useLeftPanel } from './panel/context';
+
+export const Header = ({
+  title,
+  endFix,
+}: {
+  title: string;
+  endFix?: React.ReactNode;
+}) => {
+  const { togglePanel } = useLeftPanel();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  return (
+    <div>
+      <div className="flex items-center px-6 gap-4 h-[56px]">
+        {isSmallScreen ? (
+          <div className="h-7 w-7 p-1" />
+        ) : (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 p-1 hover:bg-gray-200 cursor-pointer"
+            onClick={togglePanel}
+          >
+            <SidebarIcon width={20} height={20} />
+          </Button>
+        )}
+        <Separator orientation="vertical" className="h-5" />
+        <div className="text-[15px] font-semibold">{title}</div>
+        {endFix && <div className="ml-auto">{endFix}</div>}
+      </div>
+      <Separator />
+    </div>
+  );
+};
+
+export const RightPanelHeader = ({
+  title,
+  handleClose,
+  handleConfirm,
+  canSave,
+}: {
+  title: string;
+  handleClose: () => void;
+  handleConfirm: () => void;
+  canSave: boolean;
+}) => {
+  return (
+    <div>
+      <div className=" flex justify-between items-center h-[56px] px-6">
+        <Button
+          type="button"
+          size="icon"
+          className="w-7 h-7"
+          variant="ghost"
+          onClick={handleClose}
+        >
+          <XIcon size={20} />
+        </Button>
+        <span className="text-base font-medium">{title}</span>
+        <Button
+          type="submit"
+          size="icon"
+          className="w-7 h-7"
+          variant="ghost"
+          onClick={handleConfirm}
+          disabled={!canSave}
+        >
+          <CheckIcon size={20} />
+        </Button>
+      </div>
+      <Separator />
+    </div>
+  );
+};