Merge pull request #2030 from visuddhinanda/agile

🔥 Affix

dashboard/src/components/article/NavigateButton.tsx

@@ -1,7 +1,7 @@
 import { Affix, Button, Dropdown, Space, Typography } from "antd";
 import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons";
 import { ITocPathNode } from "../corpus/TocPath";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 const { Paragraph, Text } = Typography;
 
@@ -37,74 +37,69 @@ const NavigateButtonWidget = ({
 }: IWidget) => {
   const currTitle = path && path.length > 0 ? path[path.length - 1].title : "";
 
-  const affixRef = useRef<any>();
-  affixRef?.current?.updatePosition();
-
   return (
-    <Affix ref={affixRef} offsetBottom={0}>
-      <Paragraph
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          backdropFilter: "blur(5px)",
-          backgroundColor: "rgba(200,200,200,0.2)",
-          padding: 4,
+    <Paragraph
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        backdropFilter: "blur(5px)",
+        backgroundColor: "rgba(200,200,200,0.2)",
+        padding: 4,
+      }}
+    >
+      <Button
+        size="middle"
+        disabled={typeof prevTitle === "undefined"}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (typeof onPrev !== "undefined") {
+            onPrev(event);
+          }
         }}
       >
-        <Button
-          size="middle"
-          disabled={typeof prevTitle === "undefined"}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            if (typeof onPrev !== "undefined") {
-              onPrev(event);
-            }
-          }}
-        >
-          <Space>
-            <DoubleLeftOutlined key="icon" />
-            <EllipsisMiddle maxWidth={250} suffixCount={7} text={prevTitle} />
-          </Space>
-        </Button>
-        <div>
-          <Dropdown
-            placement="top"
-            trigger={["hover"]}
-            menu={{
-              items: path?.map((item, id) => {
-                return { label: item.title, key: item.key ?? item.title };
-              }),
-              onClick: (e) => {
-                console.debug("onPathChange", e.key);
-                if (typeof onPathChange !== "undefined") {
-                  onPathChange(e.key);
-                }
-              },
-            }}
-          >
-            <span>{currTitle}</span>
-          </Dropdown>
-        </div>
-        <Button
-          size="middle"
-          disabled={typeof nextTitle === "undefined"}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            if (typeof onNext !== "undefined") {
-              onNext(event);
-            }
+        <Space>
+          <DoubleLeftOutlined key="icon" />
+          <EllipsisMiddle maxWidth={250} suffixCount={7} text={prevTitle} />
+        </Space>
+      </Button>
+      <div>
+        <Dropdown
+          placement="top"
+          trigger={["hover"]}
+          menu={{
+            items: path?.map((item, id) => {
+              return { label: item.title, key: item.key ?? item.title };
+            }),
+            onClick: (e) => {
+              console.debug("onPathChange", e.key);
+              if (typeof onPathChange !== "undefined") {
+                onPathChange(e.key);
+              }
+            },
           }}
         >
-          <Space>
-            <EllipsisMiddle
-              key="title"
-              maxWidth={250}
-              suffixCount={7}
-              text={nextTitle?.substring(0, 20)}
-            />
-            <DoubleRightOutlined key="icon" />
-          </Space>
-        </Button>
-      </Paragraph>
-    </Affix>
+          <span>{currTitle}</span>
+        </Dropdown>
+      </div>
+      <Button
+        size="middle"
+        disabled={typeof nextTitle === "undefined"}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (typeof onNext !== "undefined") {
+            onNext(event);
+          }
+        }}
+      >
+        <Space>
+          <EllipsisMiddle
+            key="title"
+            maxWidth={250}
+            suffixCount={7}
+            text={nextTitle?.substring(0, 20)}
+          />
+          <DoubleRightOutlined key="icon" />
+        </Space>
+      </Button>
+    </Paragraph>
   );
 };