diff --git a/README.md b/README.md
index 33378a3af..791049043 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ Anybody who wants to land a job at a tech company for a front end role and is lo
---
-
Get paid more. Moonchaser has negotiated hundreds of tech offers. Get 1-1 guidance from their experienced team of ex-FAANG PMs, SWEs, and Recruiters. Find out more
+
Get paid more. Moonchaser has negotiated hundreds of tech offers. Get 1-1 guidance from their experienced team of ex-FAANG PMs, SWEs, and Recruiters. Find out more
---
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 0d63a329b..d593fd94b 100755
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -110,4 +110,5 @@ module.exports = {
},
],
],
+ clientModules: [require.resolve('./src/components/SidebarAd')],
};
diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js
new file mode 100644
index 000000000..917ded520
--- /dev/null
+++ b/website/src/components/SidebarAd/index.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+import styles from './styles.module.css';
+
+const AD_ELEMENT_ID = 'ad-element-id';
+const CONTAINER_SELECTOR = '.menu.menu--responsive';
+
+function SidebarAd() {
+ return (
+
+
+ Get paid more. Receive risk-free salary negotiation
+ help from Moonchaser. You pay nothing unless your offer is increased.
+
+
+ );
+}
+
+function initAd() {
+ const $adEl = (() => {
+ const $el = document.getElementById(AD_ELEMENT_ID);
+ if ($el) {
+ return $el;
+ }
+
+ const $tocEl = document.querySelector(CONTAINER_SELECTOR);
+ if ($tocEl == null) {
+ return null;
+ }
+
+ const $newEl = document.createElement('div');
+ $newEl.id = AD_ELEMENT_ID;
+ $tocEl.append($newEl);
+
+ return $newEl;
+ })();
+
+ if ($adEl == null) {
+ return;
+ }
+
+ ReactDOM.render(, $adEl);
+}
+
+if (ExecutionEnvironment.canUseDOM) {
+ window.onload = initAd;
+}
+
+export default (function (context, options) {
+ return {
+ name: 'sidebar-ad',
+ onRouteUpdate() {
+ // Render only after the page renders.
+ setTimeout(() => {
+ initAd();
+ }, 0);
+ },
+ };
+})();
diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css
new file mode 100644
index 000000000..623b0d836
--- /dev/null
+++ b/website/src/components/SidebarAd/styles.module.css
@@ -0,0 +1,33 @@
+.container {
+ background-color: var(--ifm-color-primary-light);
+ background-repeat: no-repeat;
+ background-size: contain;
+ border-radius: var(--ifm-global-radius);
+ color: #fff;
+ display: block;
+ margin: 0.5rem;
+ padding: 1rem;
+ transition: background-color var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+.container:hover {
+ background-color: var(--ifm-color-primary);
+ color: #fff;
+ text-decoration: none;
+}
+
+@media screen and (max-width: 996px) {
+ .container {
+ display: none;
+ }
+}
+
+.tagline {
+ font-size: 0.75rem;
+ margin-bottom: 0;
+}
+
+.logo {
+ width: 96px;
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 6ae0f9418..f1859cd13 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -70,10 +70,10 @@ function Home() {