Asara/sudoscientist-js-frontend
Archived
1
0
Fork 0
Code Issues Pull requests Activity

Reactive dropdown awoooooooooooooo

Browse source
This commit is contained in:
Amarpreet Minhas 2019-08-27 01:00:21 -04:00
parent f92c4e62b5
commit 5f53e4aa00
1 changed files with 45 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/components/NavBar.js
View file

@ -2,44 +2,62 @@ import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
function AuthMenu(props) {
if (!props.showMenu) {
return null;
}
return (
<div className="ui menu dropdown" style={{display: "inline"}}>
<div className="ui left icon input">
<input type="text" placeholder="Username">
</input>
<i className="users icon"></i>
</div>
<div className="ui left icon input">
<input type="text" placeholder="Password">
</input>
<i className="lock icon"></i>
</div>
<div className="fluid ui buttons">
<button className="ui button">Sign Up</button>
<div className="or"></div>
<button className="ui positive button">Sign In</button>
</div>
</div>
)
}
class NavBar extends Component { class NavBar extends Component {
constructor (props) { constructor (props) {
super(props) super(props)
this.state = { this.state = {
logged_in: false, logged_in: false,
auth_menu_visible: false auth_menu_visible: false,
where_in_auth_menu: false,
} }
this.handleLoginDropdown = this.handleLoginDropdown.bind(this)
} }
componentDidMount() {
handleLoginDropdown() {
this.setState(state => ({
auth_menu_visible: !state.auth_menu_visible
}));
} }
render() { render() {
return ( return (
<div className="ui four item secondary menu"> <div>
<NavLink exact to="/" className='item'>sudoscientist:~#</NavLink> <div className="ui four item secondary menu">
<NavLink to="/posts/" className='item' activeClassName='active'>Posts</NavLink> <NavLink exact to="/" className='item'>sudoscientist:~#</NavLink>
<NavLink to="/about/" className='item' activeClassName='active'>About</NavLink> <NavLink to="/posts/" className='item' activeClassName='active'>Posts</NavLink>
<div className="item ui dropdown"> <NavLink to="/about/" className='item' activeClassName='active'>About</NavLink>
<div className="text">Login</div> <div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
<i className="dropdown icon"></i> Login
<div className="ui menu" style={{display: "inline"}}> <i className="dropdown icon"></i>
<div className="ui left icon input"> <AuthMenu showMenu={this.state.auth_menu_visible}></AuthMenu>
<input type="text" placeholder="Username">
</input>
<i className="users icon"></i>
</div>
<div className="ui left icon input">
<input type="text" placeholder="Password">
</input>
<i className="lock icon"></i>
</div>
<div className="fluid ui buttons">
<button className="ui button">Sign Up</button>
<div className="or"></div>
<button className="ui positive button">Sign In</button>
</div>
</div> </div>
</div> </div>
</div> </div>
); );
} }
@ -48,7 +66,7 @@ class NavBar extends Component {
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
logged_in: state.logged_in, logged_in: state.logged_in,
auth_menu_collapsed: state.auth_menu_collapsed auth_menu_visible: state.auth_menu_visible
}; };
} }