diff options
author | Dessalines <tyhou13@gmx.com> | 2020-07-04 11:35:38 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-07-04 11:35:38 -0400 |
commit | de63ff6d2a233a0d8637b7fbffc11968d8c66703 (patch) | |
tree | 6609f820655d88fcd69e71ca2af5054fef6c8f7a /ui/src/components/navbar.tsx | |
parent | fa0b0b68caa89bc4db5b6af5c31ebd4d4337ca85 (diff) |
Some navbar fixes.
Diffstat (limited to 'ui/src/components/navbar.tsx')
-rw-r--r-- | ui/src/components/navbar.tsx | 90 |
1 files changed, 47 insertions, 43 deletions
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 53b085e5..489f1b93 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -12,7 +12,6 @@ import { GetPrivateMessagesForm, PrivateMessagesResponse, SortType, - SearchType, GetSiteResponse, Comment, CommentResponse, @@ -20,7 +19,6 @@ import { UserView, PrivateMessageResponse, WebSocketJsonResponse, - SearchForm, } from '../interfaces'; import { wsJsonToRes, @@ -183,7 +181,7 @@ export class Navbar extends Component<any, NavbarState> { <div className={`${!this.state.expanded && 'collapse'} navbar-collapse`} > - <ul class="navbar-nav mr-auto"> + <ul class="navbar-nav my-2 mr-auto"> <li class="nav-item"> <Link class="nav-link" @@ -229,34 +227,32 @@ export class Navbar extends Component<any, NavbarState> { {!this.context.router.history.location.pathname.match( /^\/search/ ) && ( - <div class="nav-item my-2"> - <form - class="form-inline" - onSubmit={linkEvent(this, this.handleSearchSubmit)} + <form + class="form-inline" + onSubmit={linkEvent(this, this.handleSearchSubmit)} + > + <input + class={`form-control mr-0 search-input ${ + this.state.toggleSearch ? 'show-input' : 'hide-input' + }`} + onInput={linkEvent(this, this.handleSearchParam)} + value={this.state.searchParam} + ref={this.searchTextField} + type="text" + placeholder={i18n.t('search')} + onBlur={linkEvent(this, this.handleSearchBlur)} + ></input> + <button + name="search-btn" + onClick={linkEvent(this, this.handleSearchBtn)} + class="btn btn-link" + style="color: var(--gray)" > - <input - class={`form-control mr-0 search-input ${ - this.state.toggleSearch ? 'show-input' : 'hide-input' - }`} - onInput={linkEvent(this, this.handleSearchParam)} - value={this.state.searchParam} - ref={this.searchTextField} - type="text" - placeholder={i18n.t('search')} - onBlur={linkEvent(this, this.handleSearchBlur)} - ></input> - <button - name="search-btn" - onClick={linkEvent(this, this.handleSearchBtn)} - class="btn btn-link" - style="color: var(--gray)" - > - <svg class="icon"> - <use xlinkHref="#icon-search"></use> - </svg> - </button> - </form> - </div> + <svg class="icon"> + <use xlinkHref="#icon-search"></use> + </svg> + </button> + </form> )} <ul class="navbar-nav my-2"> {this.canAdmin && ( @@ -272,8 +268,10 @@ export class Navbar extends Component<any, NavbarState> { </Link> </li> )} - {this.state.isLoggedIn ? ( - <> + </ul> + {this.state.isLoggedIn ? ( + <> + <ul class="navbar-nav my-2"> <li className="nav-item"> <Link class="nav-link" to="/inbox" title={i18n.t('inbox')}> <svg class="icon"> @@ -286,6 +284,8 @@ export class Navbar extends Component<any, NavbarState> { )} </Link> </li> + </ul> + <ul class="navbar-nav"> <li className="nav-item"> <Link class="nav-link" @@ -307,17 +307,21 @@ export class Navbar extends Component<any, NavbarState> { </span> </Link> </li> - </> - ) : ( - <Link - class="nav-link" - to="/login" - title={i18n.t('login_sign_up')} - > - {i18n.t('login_sign_up')} - </Link> - )} - </ul> + </ul> + </> + ) : ( + <ul class="navbar-nav my-2"> + <li className="nav-item"> + <Link + class="nav-link" + to="/login" + title={i18n.t('login_sign_up')} + > + {i18n.t('login_sign_up')} + </Link> + </li> + </ul> + )} </div> </nav> ); |