feat: Update to API references look and feel (#343)

Co-authored-by: Vadim Smirnov <smirnou.vadzim@gmail.com> Co-authored-by: zakariasaad <zakaria.elas@gmail.com> Co-authored-by: Vilfred Sikker <vilfredsikker@gmail.com> Co-authored-by: olivermrbl <oliver@mrbltech.com>
2021-08-20 10:26:29 +02:00
parent 40400b483c
commit 143f06aa39
85 changed files with 19022 additions and 7116 deletions
@@ -0,0 +1,115 @@
+import { Flex, Box, Link, Select } from "@theme-ui/components"
+import React, { useContext } from "react"
+import { navigate } from "gatsby-link"
+
+import GitHub from "../components/icons/github"
+import NavigationContext from "../context/navigation-context"
+import { convertToKebabCase } from "../utils/convert-to-kebab-case"
+import ChevronDown from "./icons/chevron-down"
+
+const Topbar = ({ data, api }) => {
+  const { goTo, reset, currentSection } = useContext(NavigationContext)
+
+  const handleChange = e => {
+    const parts = e.target.value.split(" ")
+
+    if (parts[0] === api) {
+      goTo({ section: parts[1] })
+    } else {
+      reset()
+      navigate(`/api/${api === "admin" ? "store" : "admin"}`)
+    }
+  }
+
+  return (
+    <Flex
+      sx={{
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        px: "5vw",
+        height: "headerHeight",
+        boxShadow: "topbarShadow",
+        "@media screen and (max-width: 848px)": {
+          position: "fixed",
+          top: "0",
+          left: "0",
+          right: "0",
+          zIndex: "9999",
+          backgroundColor: "light",
+        },
+      }}
+    >
+      <Box>
+        <Box
+          sx={{
+            display: "none",
+            alignItems: "center",
+            "@media screen and (max-width: 848px)": {
+              display: "block",
+            },
+          }}
+        >
+          <Select
+            arrow={<ChevronDown fill={"dark"} />}
+            sx={{
+              border: "none",
+              width: "100%",
+              fontSize: "2",
+              fontFamily: "body",
+              fontWeight: "500",
+              flexGrow: "1",
+              px: "0",
+              transition: "all .1s ease-in-out",
+              "&:focus": {
+                outline: "none !important",
+              },
+            }}
+            onChange={handleChange}
+            value={`${api} ${currentSection}`}
+          >
+            <optgroup label={`${api.slice(0, 1).toUpperCase()}${api.slice(1)}`}>
+              {data.sections.map((s, i) => {
+                return (
+                  <option
+                    key={i}
+                    value={`${api} ${convertToKebabCase(
+                      s.section.section_name
+                    )}`}
+                  >
+                    {s.section.section_name}
+                  </option>
+                )
+              })}
+            </optgroup>
+            <optgroup label={api === "admin" ? "Store" : "Admin"}>
+              <option>{`Go to ${
+                api === "admin" ? "Storefront API" : "Admin API"
+              }`}</option>
+            </optgroup>
+          </Select>
+        </Box>
+      </Box>
+      <Flex
+        sx={{
+          alignItems: "center",
+        }}
+      >
+        <Link variant="topbar" mr={3} href="https://docs.medusa-commerce.com">
+          Docs
+        </Link>
+        <Link
+          sx={{
+            pt: "4px",
+          }}
+          variant="topbar"
+          href="https://github.com/medusajs/medusa"
+        >
+          <GitHub />
+        </Link>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default Topbar