Issue-#859: Add toggle button for v3-v4
This commit is contained in:
parent
c2f9f0a523
commit
08c989b532
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -47,6 +47,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.searchButtonContainer {
|
||||
margin-top: $spacer * 0.5 ;
|
||||
.container {
|
||||
margin-top: $spacer * 0.5;
|
||||
align-items: 'center';
|
||||
}
|
||||
|
|
|
@ -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
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue