added full keycloak support. Partial Quantum backend support, Moved to

.env for config

- removed the globalVars variable for a lack of need
- changed the documentation page for test of multilevel navigation
- added machines page to route
- cleaned up dependencies for build
- changed config to split imports

src/Pages/DocumentationPage/DocumentationPage.tsx

@@ -1,13 +1,5 @@
-import {
-  ActionIcon,
-  Box,
-  Divider,
-  Menu,
-  TableOfContents,
-  Title,
-} from "@mantine/core";
+import { Box, Divider, TableOfContents, Title } from "@mantine/core";
 import "./DocumentationPage.css";
-import { IconMenu2 } from "@tabler/icons-react";
 import { Helmet } from "react-helmet";
 
 function DocumentationPage() {
@@ -31,9 +23,12 @@ function DocumentationPage() {
             color="accent"
             size="sm"
             radius="sm"
+            minDepthToOffset={0}
+            depthOffset={20}
             scrollSpyOptions={{
-              selector: "section h2",
+              selector: "section h1, h2",
             }}
+            className=""
             getControlProps={({ data }) => ({
               onClick: () =>
                 data
@@ -43,56 +38,12 @@ function DocumentationPage() {
             })}
           />
         </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>
+            <Title order={1}>1. Введение</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 id="quick-start" style={{ height: 1000 }}>
+            <Title order={2}>1.1 Быстрое начало</Title>
           </section>
         </div>
       </div>