Working on copying the syntax switcher

src/css/custom.css

@@ -211,13 +211,3 @@ article a[target="_blank"]:after {
   content: url("/img/external_link.svg");
   padding-left: 5px;
 }
-
-/* Language sidebar header */
-.sidebar-header {
-  font-family: 'GT Eesti Display', sans-serif;
-  font-weight: bold;
-  font-size: 16px;
-  line-height: 26px;
-  color: #4A4E52;
-  padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
-}

src/theme/DocSidebar/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import DocSidebar from '@theme-original/DocSidebar';
+import SyntaxSwitch from '../SyntaxSwitch';
+import { useSyntax } from "../SyntaxContext";
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export default function DocSidebarWrapper(props) {
+  const { path } = props;
+  const { syntax, setSyntax } = useSyntax();
+
+  const ligoSwitcher = path.startsWith('/languages/ligo') ?
+    <SyntaxSwitch syntax={syntax} onSyntaxChange={setSyntax} />
+    : <></>;
+
+  const sidebarContainerClass = path.startsWith('/languages/ligo') ?
+    clsx(styles.docsidebar__container) : null;
+
+  return (
+    <>
+      {ligoSwitcher}
+      <div className={sidebarContainerClass} >
+        <DocSidebar {...props}/>
+      </div>
+    </>
+  );
+}

src/theme/DocSidebar/styles.module.css

@@ -0,0 +1,3 @@
+.docsidebar__container div {
+  padding-top: 0;
+}

src/theme/Syntax/index.jsx

@@ -1,14 +1,17 @@
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-// Mocked version of Syntax component from LIGO repo
+import SyntaxContext from '../SyntaxContext';
 
 function Syntax(props) {
   return (
-  <>
-    <div className={clsx(styles.titleText)}>{props.syntax}</div>
-    {props.children}
-  </>);
+    <SyntaxContext.Consumer>
+      {(({syntax}) => {
+         if (syntax === props.syntax) {
+             return props.children;
+         } else {
+             return <></>
+         }
+      })}
+    </SyntaxContext.Consumer>
+  );
 }
 
-export default Syntax
+export default Syntax;

src/theme/SyntaxContext/index.jsx

@@ -0,0 +1,32 @@
+import React, { useContext } from "react";
+
+const valid = ["jsligo", "cameligo", "pascaligo"];
+
+const ctx = {
+  syntax: (() => {
+    if (typeof window === "undefined") return "jsligo";
+
+    const syntax = localStorage.getItem("syntax");
+
+    const params = new Proxy(new URLSearchParams(window.location.search), {
+      get: (searchParams, prop) => searchParams.get(prop),
+    });
+
+    const lang = (params.lang || "").toLowerCase();
+
+    if (valid.includes(lang)) return lang;
+
+    return syntax ?? "jsligo";
+  })(),
+  setSyntax: () => {},
+};
+
+const SyntaxContext = React.createContext(ctx);
+
+export const useSyntax = () => {
+  const syntaxContext = useContext(SyntaxContext);
+
+  return syntaxContext;
+};
+
+export default SyntaxContext;

src/theme/SyntaxSwitch/index.jsx

@@ -0,0 +1,70 @@
+import { useHistory, useLocation } from "@docusaurus/router";
+import React, { useCallback, useEffect, useState } from "react";
+import styles from './styles.module.css';
+
+function SyntaxSwitch(props) {
+  const [isNext, setIsNext] = useState(false);
+  const location = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    let hidePascaligo =
+      !location.pathname?.startsWith("/docs/0.72.0") &&
+      !location.pathname?.startsWith("/docs/0.73.0");
+
+    setIsNext(hidePascaligo);
+  }, [location]);
+
+  const onSyntaxChange = useCallback(
+    (value) => {
+      if (typeof window === "undefined") return;
+      history.replace({
+        search: `?lang=${value}`,
+      });
+      localStorage.setItem("syntax", value);
+      props.onSyntaxChange(value);
+    },
+    [props.syntax]
+  );
+
+  return isNext ? (
+    <form className={styles["switch__form"]}>
+      <div className={styles["switch__container"]}>
+        <label
+          className={styles["switch__options-jsligo"]}
+          onClick={() => onSyntaxChange("jsligo")}
+        >
+          JsLIGO
+        </label>
+        <button
+          type="button"
+          role="switch"
+          className={styles.switch__button}
+          aria-label={`prefer ${props.syntax}`}
+          aria-checked={props.syntax === "cameligo"}
+          onClick={() => onSyntaxChange(props.syntax === "jsligo" ? "cameligo" : "jsligo")}
+        >
+          <span className={styles["switch__button-circle"]}></span>
+        </button>
+        <label
+          className={styles["switch__options-cameligo"]}
+          onClick={() => onSyntaxChange("cameligo")}
+        >
+          CameLIGO
+        </label>
+      </div>
+    </form>
+  ) : (
+    <select
+      className={styles.syntaxSwitch}
+      value={props.syntax}
+      onChange={(e) => onSyntaxChange(e.target.value)}
+    >
+      <option value="cameligo">CameLIGO</option>
+      <option value="jsligo">JsLIGO</option>
+      <option value="pascaligo">PascaLIGO</option>
+    </select>
+  );
+}
+
+export default SyntaxSwitch;

src/theme/SyntaxSwitch/styles.module.css

@@ -0,0 +1,92 @@
+.switch__form {
+  padding-top: var(--ifm-navbar-height);
+  width: var(--doc-sidebar-width);
+}
+
+.switch__container {
+  display: flex;
+  transition: color 0.5s;
+}
+.switch__button {
+  cursor: pointer;
+
+  margin: 0 5px;
+  transform: scale(0.8);
+  position: relative;
+  border-radius: 11px;
+  display: block;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--ligo-color_border);
+  background-color: var(--ligo-color_background-brand-primary);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.switch__button[aria-checked="true"] > .switch__button-circle {
+  transform: translate(20px);
+}
+
+.switch__button-circle {
+  position: absolute;
+  top: 2px;
+  left: 1px;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background-color: var(--ligo-base-color_blue-lightest);
+  box-shadow: 0 0 1px 3px var(--ligo-base-color_blue-lighter);
+  transition: background-color 0.25s, transform 0.25s;
+}
+
+.switch__options-cameligo,
+.switch__options-jsligo {
+  cursor: pointer;
+  color: var(--ligo-color_content-secondary);
+  font-weight: bold;
+}
+
+.switch__options-jsligo:has(+ .switch__button[aria-checked="false"]) {
+  color: var(--ligo-color_content-primary);
+}
+
+.switch__button[aria-checked="true"] + .switch__options-cameligo {
+  color: var(--ligo-color_content-primary);
+}
+
+.syntaxSwitch {
+  display: block;
+  font-size: 1rem;
+  font-weight: bold;
+  line-height: 1rem;
+  padding: 0.6em 1.4em 0.5em 0.8em;
+  box-sizing: border-box;
+  border: none;
+  color: var(--color-primary-text);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.65em auto, 100%;
+}
+.syntaxSwitch::-ms-expand {
+  display: none;
+}
+.syntaxSwitch:hover {
+  border-color: #888;
+}
+.syntaxSwitch:focus {
+  border-color: #aaa;
+  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
+  box-shadow: 0 0 0 3px -moz-mac-focusring;
+  color: var(--color-primary-text);
+  outline: none;
+}
+.syntaxSwitch option {
+  color: var(--color-primary-text);
+  font-weight: normal;
+  background-color: var(--ifm-navbar-background-color);
+}