2022-10-10 00:55:32 +11:00
import PropTypes from 'prop-types' ;
2023-05-24 01:15:17 +10:00
import { Component } from 'react' ;
2022-10-10 00:55:32 +11:00
import { defineMessages , injectIntl } from 'react-intl' ;
2023-05-24 01:15:17 +10:00
2022-10-10 00:55:32 +11:00
import { Link } from 'react-router-dom' ;
2023-05-24 01:15:17 +10:00
2023-05-10 16:58:21 +10:00
import { WordmarkLogo } from 'mastodon/components/logo' ;
2023-05-24 01:15:17 +10:00
import NavigationPortal from 'mastodon/components/navigation_portal' ;
2023-07-09 04:00:12 +10:00
import { timelinePreview , trendsEnabled } from 'mastodon/initial_state' ;
2023-07-14 01:18:09 +10:00
import { transientSingleColumn } from 'mastodon/is_mobile' ;
2023-05-24 01:15:17 +10:00
2022-10-11 06:41:25 +11:00
import ColumnLink from './column_link' ;
2022-11-06 04:28:13 +11:00
import DisabledAccountBanner from './disabled_account_banner' ;
2022-10-10 00:55:32 +11:00
import FollowRequestsColumnLink from './follow_requests_column_link' ;
2019-05-26 05:27:00 +10:00
import ListPanel from './list_panel' ;
2022-10-09 12:49:51 +11:00
import NotificationsCounterIcon from './notifications_counter_icon' ;
2022-09-29 12:39:33 +10:00
import SignInBanner from './sign_in_banner' ;
2022-10-10 00:55:32 +11:00
const messages = defineMessages ( {
home : { id : 'tabs_bar.home' , defaultMessage : 'Home' } ,
notifications : { id : 'tabs_bar.notifications' , defaultMessage : 'Notifications' } ,
explore : { id : 'explore.title' , defaultMessage : 'Explore' } ,
2023-07-02 08:05:10 +10:00
firehose : { id : 'column.firehose' , defaultMessage : 'Live feeds' } ,
2023-03-31 00:16:20 +11:00
direct : { id : 'navigation_bar.direct' , defaultMessage : 'Private mentions' } ,
2023-07-22 03:09:13 +10:00
favourites : { id : 'navigation_bar.favourites' , defaultMessage : 'Favorites' } ,
2022-10-10 00:55:32 +11:00
bookmarks : { id : 'navigation_bar.bookmarks' , defaultMessage : 'Bookmarks' } ,
lists : { id : 'navigation_bar.lists' , defaultMessage : 'Lists' } ,
preferences : { id : 'navigation_bar.preferences' , defaultMessage : 'Preferences' } ,
followsAndFollowers : { id : 'navigation_bar.follows_and_followers' , defaultMessage : 'Follows and followers' } ,
about : { id : 'navigation_bar.about' , defaultMessage : 'About' } ,
2022-10-26 04:03:16 +11:00
search : { id : 'navigation_bar.search' , defaultMessage : 'Search' } ,
2023-07-14 01:18:09 +10:00
advancedInterface : { id : 'navigation_bar.advanced_interface' , defaultMessage : 'Open in advanced web interface' } ,
2023-08-31 20:18:46 +10:00
openedInClassicInterface : { id : 'navigation_bar.opened_in_classic_interface' , defaultMessage : 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' } ,
2022-10-10 00:55:32 +11:00
} ) ;
2019-05-26 05:27:00 +10:00
2023-05-23 18:52:27 +10:00
class NavigationPanel extends Component {
2019-05-26 05:27:00 +10:00
2022-09-29 12:39:33 +10:00
static contextTypes = {
router : PropTypes . object . isRequired ,
identity : PropTypes . object . isRequired ,
} ;
2019-05-26 05:27:00 +10:00
2022-10-10 00:55:32 +11:00
static propTypes = {
intl : PropTypes . object . isRequired ,
} ;
2023-07-02 08:05:10 +10:00
isFirehoseActive = ( match , location ) => {
return match || location . pathname . startsWith ( '/public' ) ;
} ;
2022-09-29 12:39:33 +10:00
render ( ) {
2022-10-10 00:55:32 +11:00
const { intl } = this . props ;
2022-11-06 04:28:13 +11:00
const { signedIn , disabledAccountId } = this . context . identity ;
2019-05-26 05:27:00 +10:00
2022-09-29 12:39:33 +10:00
return (
< div className = 'navigation-panel' >
2022-10-05 05:13:23 +11:00
< div className = 'navigation-panel__logo' >
2023-05-10 16:58:21 +10:00
< Link to = '/' className = 'column-link column-link--logo' > < WordmarkLogo / > < / Link >
2023-07-14 01:18:09 +10:00
2023-08-31 20:18:46 +10:00
{ transientSingleColumn ? (
< div class = 'switch-to-advanced' >
{ intl . formatMessage ( messages . openedInClassicInterface ) }
{ " " }
< a href = { ` /deck ${ location . pathname } ` } class = 'switch-to-advanced__toggle' >
{ intl . formatMessage ( messages . advancedInterface ) }
< / a >
< / div >
) : (
< hr / >
2023-07-14 01:18:09 +10:00
) }
2022-10-05 05:13:23 +11:00
< / div >
2019-05-26 05:27:00 +10:00
2022-09-29 12:39:33 +10:00
{ signedIn && (
2023-05-23 19:47:36 +10:00
< >
2022-10-10 00:55:32 +11:00
< ColumnLink transparent to = '/home' icon = 'home' text = { intl . formatMessage ( messages . home ) } / >
< ColumnLink transparent to = '/notifications' icon = { < NotificationsCounterIcon className = 'column-link__icon' / > } text = { intl . formatMessage ( messages . notifications ) } / >
< FollowRequestsColumnLink / >
2023-05-23 19:47:36 +10:00
< / >
2022-09-29 12:39:33 +10:00
) }
2023-07-09 04:00:12 +10:00
{ trendsEnabled ? (
2022-10-26 04:03:16 +11:00
< ColumnLink transparent to = '/explore' icon = 'hashtag' text = { intl . formatMessage ( messages . explore ) } / >
) : (
< ColumnLink transparent to = '/search' icon = 'search' text = { intl . formatMessage ( messages . search ) } / >
) }
2022-10-10 04:26:14 +11:00
{ ( signedIn || timelinePreview ) && (
2023-07-02 08:05:10 +10:00
< ColumnLink transparent to = '/public/local' isActive = { this . isFirehoseActive } icon = 'globe' text = { intl . formatMessage ( messages . firehose ) } / >
2022-10-09 12:49:51 +11:00
) }
2022-09-29 12:39:33 +10:00
{ ! signedIn && (
2022-10-05 05:13:23 +11:00
< div className = 'navigation-panel__sign-in-banner' >
2022-09-29 12:39:33 +10:00
< hr / >
2022-11-06 04:28:13 +11:00
{ disabledAccountId ? < DisabledAccountBanner / > : < SignInBanner / > }
2022-10-05 05:13:23 +11:00
< / div >
2022-09-29 12:39:33 +10:00
) }
{ signedIn && (
2023-05-23 19:47:36 +10:00
< >
2022-10-10 00:55:32 +11:00
< ColumnLink transparent to = '/conversations' icon = 'at' text = { intl . formatMessage ( messages . direct ) } / >
< ColumnLink transparent to = '/bookmarks' icon = 'bookmark' text = { intl . formatMessage ( messages . bookmarks ) } / >
2023-03-04 06:37:49 +11:00
< ColumnLink transparent to = '/favourites' icon = 'star' text = { intl . formatMessage ( messages . favourites ) } / >
2022-10-10 00:55:32 +11:00
< ColumnLink transparent to = '/lists' icon = 'list-ul' text = { intl . formatMessage ( messages . lists ) } / >
2022-09-29 12:39:33 +10:00
< ListPanel / >
< hr / >
2022-10-10 00:55:32 +11:00
< ColumnLink transparent href = '/settings/preferences' icon = 'cog' text = { intl . formatMessage ( messages . preferences ) } / >
2023-05-23 19:47:36 +10:00
< / >
2022-09-29 12:39:33 +10:00
) }
2022-10-05 05:13:23 +11:00
< div className = 'navigation-panel__legal' >
< hr / >
2022-10-10 00:55:32 +11:00
< ColumnLink transparent to = '/about' icon = 'ellipsis-h' text = { intl . formatMessage ( messages . about ) } / >
2022-10-05 05:13:23 +11:00
< / div >
2022-10-19 20:30:59 +11:00
< NavigationPortal / >
2022-09-29 12:39:33 +10:00
< / div >
) ;
}
}
2023-03-24 13:17:53 +11:00
export default injectIntl ( NavigationPanel ) ;