@ -150,179 +150,181 @@ export class Navbar extends Component<any, NavbarState> {
// TODO class active corresponding to current page
navbar() {
return (
< nav class = "container-fluid navbar navbar-expand-md navbar-light shadow p-0 px-3" >
< Link title = { this . state . version } class = "navbar-brand" to = "/" >
{ this . state . siteName }
< / Link >
{ this . state . isLoggedIn && (
< Link
class = "ml-auto p-0 navbar-toggler nav-link"
to = "/inbox"
title = { i18n . t ( 'inbox' ) }
>
< svg class = "icon" >
< use xlinkHref = "#icon-bell" > < / use >
< / svg >
{ this . state . unreadCount > 0 && (
< span class = "ml-1 badge badge-light" >
{ this . state . unreadCount }
< / span >
) }
< nav class = "navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3" >
< div class = "container" >
< Link title = { this . state . version } class = "navbar-brand" to = "/" >
{ this . state . siteName }
< / Link >
) }
< button
class = "navbar-toggler"
type = "button"
aria - label = "menu"
onClick = { linkEvent ( this , this . expandNavbar ) }
data - tippy - content = { i18n . t ( 'expand_here' ) }
>
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div
className = { ` ${ ! this . state . expanded && 'collapse' } navbar-collapse ` }
>
< ul class = "navbar-nav my-2 mr-auto" >
< li class = "nav-item" >
< Link
class = "nav-link"
to = "/communities"
title = { i18n . t ( 'communities' ) }
>
{ i18n . t ( 'communities' ) }
< / Link >
< / li >
< li class = "nav-item" >
< Link
class = "nav-link"
to = { {
pathname : '/create_post' ,
state : { prevPath : this.currentLocation } ,
} }
title = { i18n . t ( 'create_post' ) }
>
{ i18n . t ( 'create_post' ) }
< / Link >
< / li >
< li class = "nav-item" >
< Link
class = "nav-link"
to = "/create_community"
title = { i18n . t ( 'create_community' ) }
>
{ i18n . t ( 'create_community' ) }
< / Link >
< / li >
< li className = "nav-item" >
< Link
class = "nav-link"
to = "/sponsors"
title = { i18n . t ( 'donate_to_lemmy' ) }
>
< svg class = "icon" >
< use xlinkHref = "#icon-coffee" > < / use >
< / svg >
< / Link >
< / li >
< / ul >
{ ! this . context . router . history . location . pathname . match (
/^\/search/
) && (
< form
class = "form-inline"
onSubmit = { linkEvent ( this , this . handleSearchSubmit ) }
{ this . state . isLoggedIn && (
< Link
class = "ml-auto p-0 navbar-toggler nav-link border-0"
to = "/inbox"
title = { i18n . t ( 'inbox' ) }
>
< 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 >
< svg class = "icon" >
< use xlinkHref = "#icon-bell" > < / use >
< / svg >
{ this . state . unreadCount > 0 && (
< span class = "ml-1 badge badge-light" >
{ this . state . unreadCount }
< / span >
) }
< / Link >
) }
< ul class = "navbar-nav my-2" >
{ this . canAdmin && (
< button
class = "navbar-toggler border-0"
type = "button"
aria - label = "menu"
onClick = { linkEvent ( this , this . expandNavbar ) }
data - tippy - content = { i18n . t ( 'expand_here' ) }
>
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div
className = { ` ${ ! this . state . expanded && 'collapse' } navbar-collapse ` }
>
< ul class = "navbar-nav my-2 mr-auto" >
< li class = "nav-item" >
< Link
class = "nav-link"
to = "/communities"
title = { i18n . t ( 'communities' ) }
>
{ i18n . t ( 'communities' ) }
< / Link >
< / li >
< li class = "nav-item" >
< Link
class = "nav-link"
to = { {
pathname : '/create_post' ,
state : { prevPath : this.currentLocation } ,
} }
title = { i18n . t ( 'create_post' ) }
>
{ i18n . t ( 'create_post' ) }
< / Link >
< / li >
< li class = "nav-item" >
< Link
class = "nav-link"
to = "/create_community"
title = { i18n . t ( 'create_community' ) }
>
{ i18n . t ( 'create_community' ) }
< / Link >
< / li >
< li className = "nav-item" >
< Link
class = "nav-link"
to = { ` /admin ` }
title = { i18n . t ( 'admin_settings' ) }
to = "/sponsors"
title = { i18n . t ( 'donate_to_lemmy ' ) }
>
< svg class = "icon" >
< use xlinkHref = "#icon-settings" > < / use >
< use xlinkHref = "#icon-coffee " > < / use >
< / svg >
< / Link >
< / li >
< / ul >
{ ! this . context . router . history . location . pathname . match (
/^\/search/
) && (
< 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)"
>
< svg class = "icon" >
< use xlinkHref = "#icon-search" > < / use >
< / svg >
< / button >
< / form >
) }
< / ul >
{ this . state . isLoggedIn ? (
< >
< ul class = "navbar-nav my-2" >
< ul class = "navbar-nav my-2" >
{ this . canAdmin && (
< li className = "nav-item" >
< Link class = "nav-link" to = "/inbox" title = { i18n . t ( 'inbox' ) } >
< Link
class = "nav-link"
to = { ` /admin ` }
title = { i18n . t ( 'admin_settings' ) }
>
< svg class = "icon" >
< use xlinkHref = "#icon-bell" > < / use >
< use xlinkHref = "#icon-settings " > < / use >
< / svg >
{ this . state . unreadCount > 0 && (
< span class = "ml-1 badge badge-light" >
{ this . state . unreadCount }
< / span >
) }
< / Link >
< / li >
< / ul >
< ul class = "navbar-nav" >
) }
< / 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" >
< use xlinkHref = "#icon-bell" > < / use >
< / svg >
{ this . state . unreadCount > 0 && (
< span class = "ml-1 badge badge-light" >
{ this . state . unreadCount }
< / span >
) }
< / Link >
< / li >
< / ul >
< ul class = "navbar-nav" >
< li className = "nav-item" >
< Link
class = "nav-link"
to = { ` /u/ ${ UserService . Instance . user . username } ` }
title = { i18n . t ( 'settings' ) }
>
< span >
{ UserService . Instance . user . avatar && showAvatars ( ) && (
< img
src = { pictrsAvatarThumbnail (
UserService . Instance . user . avatar
) }
height = "32"
width = "32"
class = "rounded-circle mr-2"
/ >
) }
{ UserService . Instance . user . username }
< / span >
< / Link >
< / li >
< / ul >
< / >
) : (
< ul class = "navbar-nav my-2" >
< li className = "nav-item" >
< Link
class = "nav-link"
to = { ` /u/ ${ UserService . Instance . user . username } ` }
title = { i18n . t ( 'settings' ) }
class = "btn btn-success "
to = "/login"
title = { i18n . t ( 'login_sign_up ' ) }
>
< span >
{ UserService . Instance . user . avatar && showAvatars ( ) && (
< img
src = { pictrsAvatarThumbnail (
UserService . Instance . user . avatar
) }
height = "32"
width = "32"
class = "rounded-circle mr-2"
/ >
) }
{ UserService . Instance . user . username }
< / span >
{ i18n . t ( 'login_sign_up' ) }
< / Link >
< / li >
< / 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 >
< / div >
< / nav >
) ;
