Update nav
This commit is contained in:
jinhojang6
parent
f219e60ee7
commit
b6e3314b5b
|
|
@ -13,6 +13,7 @@ import { Tabs } from 'antd';
|
|||
import 'antd/lib/tabs/style/index.css';
|
||||
import 'antd/lib/input/style/index.css';
|
||||
import 'antd/lib/button/style/index.css';
|
||||
import 'antd/lib/steps/style/index.css';
|
||||
|
||||
// import 'antd/dist/antd.css';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { slide as Menu } from 'react-burger-menu'
|
||||
import { Button } from 'antd';
|
||||
|
||||
const Nav = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
|
@ -17,23 +18,33 @@ const Nav = () => {
|
|||
<img src={require('../images/status-network-logo.svg')} className='logo' alt="Status Logo"/>
|
||||
</a>
|
||||
</div >
|
||||
<Menu right disableAutoFocus pageWrapId={ "nav" } outerContainerId={ "main" } isOpen={ isOpen } >
|
||||
<a href="https://github.com/status-im/translate.status.im#how-to-help-translate" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.how-to-contribute" defaultMessage="How to contribute" />
|
||||
</a>
|
||||
<a href="https://github.com/status-im/translate.status.im#contributors" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.contributors" defaultMessage="Contributors" />
|
||||
</a>
|
||||
<a href="https://statusnetwork.com/" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.aboutus" defaultMessage="About us" />
|
||||
</a>
|
||||
<a href="https://github.com/status-im" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.github" defaultMessage="Github" />
|
||||
</a>
|
||||
<a href="https://our.status.im/" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.blog" defaultMessage="Blog" />
|
||||
</a>
|
||||
</Menu>
|
||||
<div className="nav-button-wrapper nav-desktop">
|
||||
<Button className="nav-button nav-margin-right">
|
||||
<a className="nav-link" href="https://github.com/status-im/translate.status.im#translate-status-into-your-language" target="_blank" rel="noopener noreferrer">How to contribute</a>
|
||||
</Button>
|
||||
<Button className="nav-button" type="primary">
|
||||
<a className="nav-link" href="https://status.im/get/" target="_blank" rel="noopener noreferrer">Get Status</a>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="nav-mobile">
|
||||
<Menu right disableAutoFocus pageWrapId={ "nav" } outerContainerId={ "main" } isOpen={ isOpen } >
|
||||
<a href="https://github.com/status-im/translate.status.im#how-to-help-translate" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.how-to-contribute" defaultMessage="How to contribute" />
|
||||
</a>
|
||||
<a href="https://github.com/status-im/translate.status.im#contributors" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.contributors" defaultMessage="Contributors" />
|
||||
</a>
|
||||
<a href="https://statusnetwork.com/" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.aboutus" defaultMessage="About us" />
|
||||
</a>
|
||||
<a href="https://github.com/status-im" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.github" defaultMessage="Github" />
|
||||
</a>
|
||||
<a href="https://our.status.im/" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
|
||||
<FormattedMessage id="nav.blog" defaultMessage="Blog" />
|
||||
</a>
|
||||
</Menu>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ import React, { useState } from 'react';
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
import ScrollableAnchor from 'react-scrollable-anchor'
|
||||
import { Steps, Button } from 'antd';
|
||||
import 'antd/lib/steps/style/index.css';
|
||||
import 'antd/lib/button/style/index.css';
|
||||
|
||||
const { Step } = Steps;
|
||||
|
||||
|
|
|
|||
|
|
@ -83,6 +83,32 @@ p {
|
|||
|
||||
/*------------- NAVIGATION BAR -------------------*/
|
||||
|
||||
.nav-button-wrapper {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.nav-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-margin-right {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
font-size: 18px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
|
@ -192,7 +218,6 @@ Note: Beware of modifying this element as it can break the animations - you shou
|
|||
margin: 20px;
|
||||
font-size: 20px !important;
|
||||
padding: 6px 20px;
|
||||
width: 150px !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
|
|
@ -412,10 +437,6 @@ main div p{
|
|||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/*------------- countries -------------------*/
|
||||
|
||||
div.languages {
|
||||
|
|
@ -703,6 +724,16 @@ footer ul {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width:700px) {
|
||||
.nav-mobile {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.nav-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:499px) {
|
||||
.ant-tabs-tab {
|
||||
font-size: 13px !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue