diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-08 17:04:03 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-08 17:04:03 -0700 |
commit | 0469b5f0c7e8c34b02155e29dfe3234cfc8cc305 (patch) | |
tree | c65865ea0f23c50308dd35f9676fcbacddefd842 /ui/src/components/navbar.tsx | |
parent | ee03b5a55f07ff396571dd6ed47a839a5446aac9 (diff) |
Adding user dropdown.
- Fixes #54.
- Fixed some styling.
Diffstat (limited to 'ui/src/components/navbar.tsx')
-rw-r--r-- | ui/src/components/navbar.tsx | 49 |
1 files changed, 41 insertions, 8 deletions
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 9754c935..c4b51e37 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -3,11 +3,24 @@ import { Link } from 'inferno-router'; import { repoUrl } from '../utils'; import { UserService } from '../services'; -export class Navbar extends Component<any, any> { +interface NavbarState { + isLoggedIn: boolean; + expanded: boolean; + expandUserDropdown: boolean; +} + +export class Navbar extends Component<any, NavbarState> { + + emptyState: NavbarState = { + isLoggedIn: UserService.Instance.loggedIn, + expanded: false, + expandUserDropdown: false + } constructor(props: any, context: any) { super(props, context); - this.state = {isLoggedIn: UserService.Instance.loggedIn, expanded: false}; + this.state = this.emptyState; + this.handleOverviewClick = this.handleOverviewClick.bind(this); // Subscribe to user changes UserService.Instance.sub.subscribe(user => { @@ -50,24 +63,44 @@ export class Navbar extends Component<any, any> { </li> </ul> <ul class="navbar-nav ml-auto mr-2"> - <li class="nav-item"> - {this.state.isLoggedIn ? - <a role="button" class="nav-link pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a> : + {this.state.isLoggedIn ? + <li className={`nav-item dropdown ${this.state.expandUserDropdown && 'show'}`}> + <a class="pointer nav-link dropdown-toggle" onClick={linkEvent(this, this.expandUserDropdown)} role="button"> + {UserService.Instance.user.username} + </a> + <div className={`dropdown-menu dropdown-menu-right ${this.state.expandUserDropdown && 'show'}`}> + <a role="button" class="dropdown-item pointer" onClick={linkEvent(this, this.handleOverviewClick)}>Overview</a> + <a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a> + </div> + </li> : <Link class="nav-link" to="/login">Login</Link> - } - </li> + } </ul> </div> </nav> ); } - handleLogoutClick() { + expandUserDropdown(i: Navbar) { + i.state.expandUserDropdown = !i.state.expandUserDropdown; + i.setState(i.state); + } + + handleLogoutClick(i: Navbar) { + i.state.expandUserDropdown = false; UserService.Instance.logout(); } + handleOverviewClick(i: Navbar) { + i.state.expandUserDropdown = false; + i.setState(i.state); + let userPage = `/user/${UserService.Instance.user.id}`; + i.context.router.history.push(userPage); + } + expandNavbar(i: Navbar) { i.state.expanded = !i.state.expanded; i.setState(i.state); } } + |