Skip to content

Instantly share code, notes, and snippets.

@Y-Taras
Last active May 13, 2020 18:43
Show Gist options
  • Save Y-Taras/48c10beaa939cb0dd67d10e6adba607e to your computer and use it in GitHub Desktop.
Save Y-Taras/48c10beaa939cb0dd67d10e6adba607e to your computer and use it in GitHub Desktop.
import React from 'react'
import { NavLink as RRNavLink, Link } from 'react-router-dom'
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink
} from 'reactstrap'
export default class Navigation extends React.Component {
constructor (props) {
super(props)
this.toggle = this.toggle.bind(this)
this.state = {
isOpen: false
}
}
toggle () {
this.setState({
isOpen: !this.state.isOpen
})
}
render () {
return (
<div className='sticky-top'>
<Navbar color='faded' inverse toggleable role='navigation' >
<NavbarToggler type='button' right onClick={this.toggle} />
<NavbarBrand tag={Link} to='/'>
<img
src='./_public/favicon.png'
height='30'
className='d-inline-block align-top'
alt='brand'
/>
</NavbarBrand>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className='ml-auto' navbar>
<NavItem>
<NavLink activeClassName='active' tag={RRNavLink} exact to='/'>
ГОЛОВНА
</NavLink>
</NavItem>
<NavItem>
<NavLink
activeClassName='active'
tag={RRNavLink}
to='/products'
>
ПРОДУКЦІЯ
</NavLink>
</NavItem>
<NavItem>
<NavLink
activeClassName='active'
tag={RRNavLink}
to='/services'
>
ПОСЛУГИ
</NavLink>
</NavItem>
<NavItem>
<NavLink activeClassName='active' tag={RRNavLink} to='/price'>
ЦІНИ
</NavLink>
</NavItem>
<NavItem>
<NavLink
activeClassName='active'
tag={RRNavLink}
to='/contacts'
>
КОНТАКТИ
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
)
}
}
{
.......
,
"dependencies": {
"axios": "^0.15.3",
"babel-loader": "^6.2.7",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-register": "6.16.0",
"express": "^4.14.0",
"history": "^4.4.0",
"lodash": "^4.16.2",
"newrelic": "^2.2.0",
"react": "^15.3.2",
"react-addons-css-transition-group": "^15.4.2",
"react-addons-transition-group": "^15.4.2",
"react-dom": "^15.3.2",
"react-ga": "^2.2.0",
"react-google-maps": "^4.11.0",
"react-redux": "^5.0.3",
"react-router": "next",
"react-router-dom": "next",
"reactstrap": "^4.1.1",
"redux": "^3.3.1",
"redux-thunk": "^2.1.0",
"shortid": "^2.2.6"
},
"devDependencies": {
"babel-core": "^6.16.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2017": "^6.16.0",
"bootstrap": "^4.0.0-alpha.6",
"css-loader": "^0.25.0",
"eslint": "^3.6.1",
"eslint-config-standard": "^7.0.0",
"eslint-config-standard-jsx": "^3.1.0",
"eslint-config-standard-react": "^4.1.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^6.3.0",
"eslint-plugin-standard": "^2.0.0",
"jsdom": "^9.5.0",
"json-loader": "^0.5.4",
"react-addons-test-utils": "^15.3.2",
"react-test-renderer": "^15.3.2",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
@JonSilver
Copy link

Thank you so much for this lovely working example 🥇

@praveenkgoswami
Copy link

Thanks, It's working :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment