Reactive dropdown awoooooooooooooo
This commit is contained in:
parent
f92c4e62b5
commit
5f53e4aa00
1 changed files with 45 additions and 27 deletions
|
@ -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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in a new issue