idanoo/GoScrobble
1
0
Fork 0
mirror of https://github.com/idanoo/GoScrobble synced 2025-07-03 14:42:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Get login prototyped

Browse source
This commit is contained in:
Daniel Mason 2021-03-26 15:31:00 +13:00
parent c67be1bd75
commit 7e4be938ee
7 changed files with 252 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/Components/Pages/Navigation.css
View file

@ -1,5 +1,5 @@
.navLink {
padding: 10px;
padding: 0 15px 0 15px;
color: #CCCCCC;
}

65
web/src/Components/Pages/Navigation.js
View file

@ -1,18 +1,59 @@
import React from 'react';
import { React, Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import { Link } from 'react-router-dom';
import './Navigation.css';
const Navigation = () => {
return (
<div>
<Navbar color="dark" dark fixed="top">
<NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
<Link class="navLink" to="/">Home</Link>
<Link class="navLink" to="/about">About</Link>
</Navbar>
</div>
);
}
const menuItems = [
'Home',
'About',
];
class Navigation extends Component {
constructor(props) {
super(props);
this.state = { isLoggedIn: false };
}
toggleLogin() {
this.setState({ isLoggedIn: !this.state.isLoggedIn })
}
_handleClick(menuItem) {
this.setState({ active: menuItem });
}
render() {
const activeStyle = { color: '#FFF' };
const renderAuthButton = () => {
if (this.state.isLoggedIn) {
return <Link class="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>;
} else {
return <Link class="navLink" onClick={this.toggleLogin.bind(this)}>Login</Link>;
}
}
return (
<div>
<Navbar color="dark" dark fixed="top">
<NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
{menuItems.map(menuItem =>
<Link
class="navLink"
style={this.state.active === menuItem ? activeStyle : {}}
onClick={this._handleClick.bind(this, menuItem)}
>
{menuItem}
</Link>
)}
<Link class="navLink" to="/">Home</Link>
<Link class="navLink" to="/about">About</Link>
{renderAuthButton()}
</Navbar>
</div>
);
}
}
export default Navigation;