NPM/site
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move language switch to the right

Browse Source
This commit is contained in:
Alexander Nozik 2021-03-26 21:30:32 +03:00
parent bb3bc967d8
commit 27ccf06573
2 changed files with 6 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/language.js
View File

@ -17,7 +17,7 @@ const Language = () => {
key={language} key={language}
onClick={() => changeLocale(language)} onClick={() => changeLocale(language)}
style={{ style={{
color: currentLocale === language ? `white` : `rgb(170,172,173)`, color: currentLocale === language ? `white` : `rgb(170, 172, 173)`,
backgroundColor: currentLocale === language ? `#db4446` : ``, backgroundColor: currentLocale === language ? `#db4446` : ``,
marginLeft: -11, marginLeft: -11,
margin: 10, margin: 10,

14
src/components/navBar.js
View File

@ -11,15 +11,10 @@ import logo from "../images/index/logo_white.png"
const CustomNavbar = () => { const CustomNavbar = () => {
const intl = useIntl(); const intl = useIntl();
const {location} = history; const {location} = history;
//let active = ["", "", "", ""]
// active[0] = location.pathname.includes('/news/') ? 'active' : "link-no-style";
// active[1] = location.pathname.includes('/about/') ? 'active' : "link-no-style";
// active[2] = location.pathname.includes('/projects/') ? 'active' : "link-no-style";
// active[3] = location.pathname.includes('/partners/') ? 'active' : "link-no-style";
let activeBrand = location.pathname === "/ru/" || location.pathname === "/en/" ? 'activeBrand' : "link-no-style"; let activeBrand = location.pathname === "/ru/" || location.pathname === "/en/" ? 'activeBrand' : "link-no-style";
let projectsLinkStyle = location.pathname.startsWith(`/${intl.locale}/projects`) ? "nav-item active" : "nav-item"
return ( return (
<> <>
@ -42,8 +37,7 @@ const CustomNavbar = () => {
<Nav.Link as="span" eventKey="about"><FormattedMessage <Nav.Link as="span" eventKey="about"><FormattedMessage
id="header.group"/></Nav.Link> id="header.group"/></Nav.Link>
</Link> </Link>
<Link to={`/${intl.locale}/projects/physics`} className="nav-item" activeClassName="active" <Link to={`/${intl.locale}/projects/physics`} className={projectsLinkStyle}>
partiallyActive={true}>
{/* projects */} {/* projects */}
<Nav.Link as="span" eventKey="projects"> <Nav.Link as="span" eventKey="projects">
<FormattedMessage id="header.projects"/> <FormattedMessage id="header.projects"/>
@ -55,10 +49,10 @@ const CustomNavbar = () => {
<Nav.Link as="span" eventKey="partners"><FormattedMessage <Nav.Link as="span" eventKey="partners"><FormattedMessage
id="header.partners"/></Nav.Link> id="header.partners"/></Nav.Link>
</Link> </Link>
<Nav.Link eventKey="language" className="language"> </Nav>
<Nav.Link eventKey="language" className="nav-item language">
<Language/> <Language/>
</Nav.Link> </Nav.Link>
</Nav>
</Navbar.Collapse> </Navbar.Collapse>
</Container> </Container>
</Navbar> </Navbar>