Skip to content

Instantly share code, notes, and snippets.

@kvnam kvnam/Navigation.js Secret
Last active Oct 9, 2018

Embed
What would you like to do?
ReactPress Navigation.js
import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav } from 'reactstrap';
import NavigationItem from '../../components/NavigationItem/NavigationItem';
const navItems = [
{
link: '/',
linkName: 'BLOG',
isVisible: true
},
{
link: '/auth',
linkName: 'SIGN IN/SIGN UP',
isVisible: true
}
];
class Navigation extends Component{
render(){
const navList = navItems.map(item => {
return <NavigationItem key={item.link} link={item.link} linkName={item.linkName} />
});
return(
<Navbar color="inverse">
<NavbarBrand href="/">ReactPress</NavbarBrand>
<Nav className="justify-content-end">
{navList}
</Nav>
</Navbar>
);
};
};
export default Navigation;
import React from 'react';
import { NavLink } from 'react-router-dom';
import { NavItem } from 'reactstrap';
import './NavigationItem.css';
const navigationItem = props => {
return (
<React.Fragment>
<NavItem className="nav-item">
<NavLink to={props.link}>{props.linkName}</NavLink>
</NavItem>
</React.Fragment>
)
};
export default navigationItem;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.