Initial commit

src/Pages/DocumentationPage/DocumentationPage.tsx

@@ -0,0 +1,103 @@
+import {
+  ActionIcon,
+  Box,
+  Divider,
+  Menu,
+  TableOfContents,
+  Title,
+} from "@mantine/core";
+import "./DocumentationPage.css";
+import { IconMenu2 } from "@tabler/icons-react";
+import { Helmet } from "react-helmet";
+
+function DocumentationPage() {
+  return (
+    <>
+      <Helmet>
+        <title>Documentation | QMolSim</title>
+        <meta
+          name="description"
+          content="See the documentation on how to setup and use the qunatum computational system"
+        />
+      </Helmet>
+      <Title order={1} className="docTitle">
+        Документация
+      </Title>
+      <Divider />
+      <div className="DocumentationPage">
+        <Box className="tableOfContents" visibleFrom="md">
+          <TableOfContents
+            variant="light"
+            color="accent"
+            size="sm"
+            radius="sm"
+            scrollSpyOptions={{
+              selector: "section h2",
+            }}
+            getControlProps={({ data }) => ({
+              onClick: () =>
+                data
+                  .getNode()
+                  .scrollIntoView({ behavior: "smooth", block: "center" }),
+              children: data.value,
+            })}
+          />
+        </Box>
+        <Box className="hoverCard" hiddenFrom="md">
+          <Menu
+            width={280}
+            shadow="md"
+            openDelay={100}
+            closeDelay={100}
+            closeOnClickOutside
+            closeOnItemClick
+            floatingStrategy="fixed"
+          >
+            <Menu.Target>
+              <ActionIcon
+                aria-label="navigation"
+                variant="gradient"
+                gradient={{ from: "blue", to: "cyan", deg: 90 }}
+                radius={"50%"}
+                size={40}
+              >
+                <IconMenu2 size={25} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <TableOfContents
+                variant="light"
+                color="accent"
+                size="sm"
+                radius="sm"
+                scrollSpyOptions={{
+                  selector: "section h2",
+                }}
+                getControlProps={({ data }) => ({
+                  onClick: () =>
+                    data
+                      .getNode()
+                      .scrollIntoView({ behavior: "smooth", block: "center" }),
+                  children: data.value,
+                })}
+              />
+            </Menu.Dropdown>
+          </Menu>
+        </Box>
+        <div className="contents">
+          <section id="introduction" style={{ height: 1000 }}>
+            <Title order={2}>Introduction</Title>
+          </section>
+          <section id="features" style={{ height: 1000 }}>
+            <Title order={2}>features</Title>
+          </section>
+          <section id="conclusion" style={{ height: 1000 }}>
+            <Title order={2}>Conslusion</Title>
+          </section>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DocumentationPage;