Merge pull request #865 from oceanprotocol/issue-859-switch-versions

Issue-#859: Add toggle button

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>

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>

src/components/HeaderHome.module.scss

@@ -47,6 +47,7 @@
   }
 }
 
-.searchButtonContainer {
+.container {
   margin-top: $spacer * 0.5;
+  align-items: 'center';
 }

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

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;
+      }
+    }
+  }
+}