|
|
@ -9,6 +9,7 @@ import IconWithCounter from 'soapbox/components/icon_with_counter';
|
|
|
|
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
|
|
|
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
|
|
|
import { isStaff } from 'soapbox/utils/accounts';
|
|
|
|
import { isStaff } from 'soapbox/utils/accounts';
|
|
|
|
import { getFeatures } from 'soapbox/utils/features';
|
|
|
|
import { getFeatures } from 'soapbox/utils/features';
|
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
|
|
|
|
|
|
|
const mapStateToProps = state => {
|
|
|
|
const mapStateToProps = state => {
|
|
|
|
const me = state.get('me');
|
|
|
|
const me = state.get('me');
|
|
|
@ -37,15 +38,16 @@ class ThumbNavigation extends React.PureComponent {
|
|
|
|
notificationCount: PropTypes.number,
|
|
|
|
notificationCount: PropTypes.number,
|
|
|
|
chatsCount: PropTypes.number,
|
|
|
|
chatsCount: PropTypes.number,
|
|
|
|
features: PropTypes.object.isRequired,
|
|
|
|
features: PropTypes.object.isRequired,
|
|
|
|
|
|
|
|
location: PropTypes.object,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const { account, dashboardCount, features } = this.props;
|
|
|
|
const { account, notificationCount, dashboardCount, location, features } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className='thumb-navigation'>
|
|
|
|
<div className='thumb-navigation'>
|
|
|
|
<NavLink to='/' exact className='thumb-navigation__link'>
|
|
|
|
<NavLink to='/' exact className='thumb-navigation__link'>
|
|
|
|
<Icon id='home' />
|
|
|
|
<Icon src={location.pathname === '/' ? require('icons/home-2-filled.svg') : require('@tabler/icons/icons/home-2.svg')} />
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.home' defaultMessage='Home' />
|
|
|
|
<FormattedMessage id='navigation.home' defaultMessage='Home' />
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
@ -53,7 +55,11 @@ class ThumbNavigation extends React.PureComponent {
|
|
|
|
|
|
|
|
|
|
|
|
{account && (
|
|
|
|
{account && (
|
|
|
|
<NavLink to='/notifications' className='thumb-navigation__link'>
|
|
|
|
<NavLink to='/notifications' className='thumb-navigation__link'>
|
|
|
|
<Icon id='bell' />
|
|
|
|
<IconWithCounter
|
|
|
|
|
|
|
|
src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
|
|
|
|
|
|
|
|
className={classNames({ 'svg-icon--active': location.pathname === '/notifications' })}
|
|
|
|
|
|
|
|
count={notificationCount}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
|
|
|
|
<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
@ -62,7 +68,10 @@ class ThumbNavigation extends React.PureComponent {
|
|
|
|
|
|
|
|
|
|
|
|
{(features.chats && account) && (
|
|
|
|
{(features.chats && account) && (
|
|
|
|
<NavLink to='/chats' className='thumb-navigation__link'>
|
|
|
|
<NavLink to='/chats' className='thumb-navigation__link'>
|
|
|
|
<Icon id='comment' />
|
|
|
|
<Icon
|
|
|
|
|
|
|
|
src={require('@tabler/icons/icons/messages.svg')}
|
|
|
|
|
|
|
|
className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.chats' defaultMessage='Chats' />
|
|
|
|
<FormattedMessage id='navigation.chats' defaultMessage='Chats' />
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
@ -70,7 +79,10 @@ class ThumbNavigation extends React.PureComponent {
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
<NavLink to='/search' className='thumb-navigation__link'>
|
|
|
|
<NavLink to='/search' className='thumb-navigation__link'>
|
|
|
|
<Icon id='search' />
|
|
|
|
<Icon
|
|
|
|
|
|
|
|
src={require('@tabler/icons/icons/search.svg')}
|
|
|
|
|
|
|
|
className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.search' defaultMessage='Search' />
|
|
|
|
<FormattedMessage id='navigation.search' defaultMessage='Search' />
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
@ -78,7 +90,10 @@ class ThumbNavigation extends React.PureComponent {
|
|
|
|
|
|
|
|
|
|
|
|
{(account && isStaff(account)) && (
|
|
|
|
{(account && isStaff(account)) && (
|
|
|
|
<NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
|
|
|
|
<NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
|
|
|
|
<IconWithCounter icon='tachometer' count={dashboardCount} />
|
|
|
|
<IconWithCounter
|
|
|
|
|
|
|
|
src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
|
|
|
|
|
|
|
|
count={dashboardCount}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
|
|
|
|
<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|