:fire: Affix

dashboard/src/components/article/Navigate.tsx

@@ -1,9 +1,10 @@
-import { Affix, Button, Space, Typography } from "antd";
+import { Button, Space, Typography } from "antd";
 import { useEffect, useState } from "react";
 import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons";
 
 import { get } from "../../request";
 import { ArticleType } from "./Article";
+import React from "react";
 
 const { Paragraph, Text } = Typography;
 
@@ -56,51 +57,50 @@ const NavigateWidget = ({ type, articleId, onChange }: IWidget) => {
       );
     }
   }, [articleId, type]);
+
   return (
-    <Affix 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
+        disabled={typeof prev === "undefined"}
+        size="middle"
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (typeof onChange !== "undefined" && prev) {
+            onChange(event, prev.id);
+          }
+        }}
+      >
+        <Space>
+          <DoubleLeftOutlined />
+          <EllipsisMiddle maxWidth={300} suffixCount={7}>
+            {prev?.title}
+          </EllipsisMiddle>
+        </Space>
+      </Button>
+      <Button
+        size="middle"
+        disabled={typeof next === "undefined"}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (typeof onChange !== "undefined" && next) {
+            onChange(event, next.id);
+          }
         }}
       >
-        <Button
-          disabled={typeof prev === "undefined"}
-          size="middle"
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            if (typeof onChange !== "undefined" && prev) {
-              onChange(event, prev.id);
-            }
-          }}
-        >
-          <Space>
-            <DoubleLeftOutlined />
-            <EllipsisMiddle maxWidth={300} suffixCount={7}>
-              {prev?.title}
-            </EllipsisMiddle>
-          </Space>
-        </Button>
-        <Button
-          size="middle"
-          disabled={typeof next === "undefined"}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            if (typeof onChange !== "undefined" && next) {
-              onChange(event, next.id);
-            }
-          }}
-        >
-          <Space>
-            <EllipsisMiddle maxWidth={300} suffixCount={7}>
-              {next?.title}
-            </EllipsisMiddle>
-            <DoubleRightOutlined />
-          </Space>
-        </Button>
-      </Paragraph>
-    </Affix>
+        <Space>
+          <EllipsisMiddle maxWidth={300} suffixCount={7}>
+            {next?.title}
+          </EllipsisMiddle>
+          <DoubleRightOutlined />
+        </Space>
+      </Button>
+    </Paragraph>
   );
 };