From 08c989b53250d435d08512372b8715cc2be6fd5c Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Thu, 3 Mar 2022 12:06:10 +0100
Subject: [PATCH] Issue-#859: Add toggle button for v3-v4

---
 src/components/Header.jsx               |  4 ++
 src/components/HeaderHome.jsx           |  8 ++-
 src/components/HeaderHome.module.scss   |  5 +-
 src/components/ToggleSwitch.jsx         | 23 +++++++++
 src/components/ToggleSwitch.module.scss | 69 +++++++++++++++++++++++++
 5 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ToggleSwitch.jsx
 create mode 100644 src/components/ToggleSwitch.module.scss

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 16d0bf66..0bf03a13 100755
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -3,6 +3,7 @@ import { Link, StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import styles from './Header.module.scss'
 import SearchButton from './Search/SearchButton'
+import ToggleSwitch from './ToggleSwitch'
 
 const query = graphql`
   query {
@@ -51,6 +52,9 @@ const Header = () => (
               <div className={styles.section}>
                 <SearchButton />
               </div>
+              <div className={styles.section}>
+                <ToggleSwitch />
+              </div>
             </nav>
           </div>
         </header>
diff --git a/src/components/HeaderHome.jsx b/src/components/HeaderHome.jsx
index 8f186867..99e24634 100644
--- a/src/components/HeaderHome.jsx
+++ b/src/components/HeaderHome.jsx
@@ -4,6 +4,7 @@ import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Content from '../components/Content'
 import styles from './HeaderHome.module.scss'
 import SearchButton from '../components/Search/SearchButton'
+import ToggleSwitch from './ToggleSwitch'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -27,9 +28,14 @@ const HeaderHome = () => (
             <h1 className={styles.headerTitle}>{siteTitle}</h1>
             <p className={styles.headerDescription}>
               {siteDescription}
-              <div className={styles.searchButtonContainer}>
+              <div className={styles.container}>
                 <SearchButton />
               </div>
+              <div className={styles.container}>
+                <div style={{ display: 'inline-block' }}>
+                  <ToggleSwitch />
+                </div>
+              </div>
             </p>
           </Content>
         </header>
diff --git a/src/components/HeaderHome.module.scss b/src/components/HeaderHome.module.scss
index 44168b33..5a4ab8d6 100644
--- a/src/components/HeaderHome.module.scss
+++ b/src/components/HeaderHome.module.scss
@@ -47,6 +47,7 @@
   }
 }
 
-.searchButtonContainer {
-  margin-top: $spacer * 0.5 ;
+.container {
+  margin-top: $spacer * 0.5;
+  align-items: 'center';
 }
diff --git a/src/components/ToggleSwitch.jsx b/src/components/ToggleSwitch.jsx
new file mode 100644
index 00000000..6ebda7d2
--- /dev/null
+++ b/src/components/ToggleSwitch.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import styles from './ToggleSwitch.module.scss'
+
+const ToggleSwitch = () => {
+  return (
+    <div className={styles.switchButton}>
+      <input
+        className={styles.switchButtonCheckbox}
+        type="checkbox"
+        onClick={() => {
+          if (window) {
+            window.open('https://v3.docs.oceanprotocol.com/', '_self')
+          }
+        }}
+      />
+      <label className={styles.switchButtonLabel} htmlFor="">
+        <span className={styles.switchButtonLabelSpan}>v4</span>
+      </label>
+    </div>
+  )
+}
+
+export default ToggleSwitch
diff --git a/src/components/ToggleSwitch.module.scss b/src/components/ToggleSwitch.module.scss
new file mode 100644
index 00000000..bb762e9f
--- /dev/null
+++ b/src/components/ToggleSwitch.module.scss
@@ -0,0 +1,69 @@
+@import 'variables';
+
+.switchButton {
+  background: rgba(255, 255, 255, 0.56);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  width: $spacer * 4;
+  text-align: center;
+  font-size: $font-size-base;
+  letter-spacing: 1px;
+  color: $brand-purple;
+  position: relative;
+  padding-right: $spacer * 2;
+
+  &:before {
+    content: 'v3';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: $spacer * 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    pointer-events: none;
+  }
+
+  &Checkbox {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+
+    &:checked + .switchButtonLabel:before {
+      transform: translateX($spacer * 2);
+      transition: transform 300ms linear;
+    }
+
+    & + .switchButtonLabel {
+      position: relative;
+      padding: 0 0;
+      display: block;
+      user-select: none;
+      pointer-events: none;
+
+      &:before {
+        content: '';
+        background: $brand-grey-lighter;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 0.5rem;
+        transform: translateX(0);
+        transition: transform 300ms;
+      }
+
+      .switchButtonLabelSpan {
+        position: relative;
+      }
+    }
+  }
+}