diff options
Diffstat (limited to 'ui/src/components/navbar.tsx')
| -rw-r--r-- | ui/src/components/navbar.tsx | 16 |
1 files changed, 12 insertions, 4 deletions
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index d766bf07..2032d49b 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -7,7 +7,7 @@ export class Navbar extends Component<any, any> { constructor(props, context) { super(props, context); - this.state = {isLoggedIn: UserService.Instance.loggedIn}; + this.state = {isLoggedIn: UserService.Instance.loggedIn, expanded: false}; // Subscribe to user changes UserService.Instance.sub.subscribe(user => { @@ -27,11 +27,14 @@ 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="#">Lemmy</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> + <a class="navbar-brand" href="#"> + <svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg> + Lemmy + </a> + <button class="navbar-toggler" type="button" onClick={linkEvent(this, this.expandNavbar)}> <span class="navbar-toggler-icon"></span> </button> - <div class="collapse navbar-collapse"> + <div className={`${!this.state.expanded && 'collapse'} navbar-collapse`}> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href={repoUrl}>About</a> @@ -63,4 +66,9 @@ export class Navbar extends Component<any, any> { UserService.Instance.logout(); // i.props.history.push('/'); } + + expandNavbar(i: Navbar, event) { + i.state.expanded = !i.state.expanded; + i.setState(i.state); + } } |