diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-09 08:37:08 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-09 08:37:08 -0700 |
commit | a05453ab78ae1fbf5da26c2dddb8397c1fc9dffb (patch) | |
tree | ee3c5aa1977718192a9fe4d459f0fc6eaf406aa4 /ui/src/components/navbar.tsx | |
parent | 3d4872ce108398ba035d2e05882a289b94f6d63d (diff) | |
parent | 8aa58e479eb742d192a17b7511c0bbce5fc7d534 (diff) |
Merge branch 'dev' into moderation
Diffstat (limited to 'ui/src/components/navbar.tsx')
-rw-r--r-- | ui/src/components/navbar.tsx | 57 |
1 files changed, 45 insertions, 12 deletions
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 2032d49b..ca0c5a2a 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -2,12 +2,26 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { repoUrl } from '../utils'; import { UserService } from '../services'; +import { version } from '../version'; -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, context) { + 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 => { @@ -27,7 +41,7 @@ export class Navbar extends Component<any, any> { navbar() { return ( <nav class="navbar navbar-expand-sm navbar-light bg-light p-0 px-3 shadow"> - <a class="navbar-brand" href="#"> + <a title={version} class="navbar-brand" href="#"> <svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg> Lemmy </a> @@ -50,25 +64,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(i: Navbar, event) { + expandUserDropdown(i: Navbar) { + i.state.expandUserDropdown = !i.state.expandUserDropdown; + i.setState(i.state); + } + + handleLogoutClick(i: Navbar) { + i.state.expandUserDropdown = false; UserService.Instance.logout(); - // i.props.history.push('/'); } - expandNavbar(i: Navbar, event) { + 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); } } + |