2019-05-25 21:27:00 +02:00
import React from 'react' ;
2022-09-29 04:39:33 +02:00
import PropTypes from 'prop-types' ;
import { NavLink , Link } from 'react-router-dom' ;
2019-05-25 21:27:00 +02:00
import { FormattedMessage } from 'react-intl' ;
import Icon from 'flavours/glitch/components/icon' ;
2022-03-03 06:45:30 +01:00
import { showTrends } from 'flavours/glitch/util/initial_state' ;
2019-08-31 13:04:26 +02:00
import { preferencesLink , relationshipsLink } from 'flavours/glitch/util/backend_links' ;
2019-05-25 21:27:00 +02:00
import NotificationsCounterIcon from './notifications_counter_icon' ;
2019-05-26 02:55:37 +02:00
import FollowRequestsNavLink from './follow_requests_nav_link' ;
2019-05-25 21:27:00 +02:00
import ListPanel from './list_panel' ;
2019-08-06 17:57:52 +02:00
import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container' ;
2022-09-29 04:39:33 +02:00
import SignInBanner from './sign_in_banner' ;
2019-05-25 21:27:00 +02:00
2022-09-29 04:39:33 +02:00
export default class NavigationPanel extends React . Component {
2019-05-25 21:27:00 +02:00
2022-09-29 04:39:33 +02:00
static contextTypes = {
router : PropTypes . object . isRequired ,
identity : PropTypes . object . isRequired ,
} ;
2019-05-25 21:27:00 +02:00
2022-09-29 04:39:33 +02:00
static propTypes = {
onOpenSettings : PropTypes . func ,
} ;
2019-05-25 21:27:00 +02:00
2022-09-29 04:39:33 +02:00
render ( ) {
const { signedIn } = this . context . identity ;
const { onOpenSettings } = this . props ;
2019-08-06 17:57:52 +02:00
2022-09-29 04:39:33 +02:00
return (
< div className = 'navigation-panel' >
{ signedIn && (
< React . Fragment >
< NavLink className = 'column-link column-link--transparent' to = '/home' data - preview - title - id = 'column.home' data - preview - icon = 'home' > < Icon className = 'column-link__icon' id = 'home' fixedWidth / > < FormattedMessage id = 'tabs_bar.home' defaultMessage = 'Home' / > < / N a v L i n k >
< NavLink className = 'column-link column-link--transparent' to = '/notifications' data - preview - title - id = 'column.notifications' data - preview - icon = 'bell' > < NotificationsCounterIcon className = 'column-link__icon' / > < FormattedMessage id = 'tabs_bar.notifications' defaultMessage = 'Notifications' / > < / N a v L i n k >
< FollowRequestsNavLink / >
< / R e a c t . F r a g m e n t >
) }
2019-05-25 21:27:00 +02:00
2022-09-29 04:39:33 +02:00
{ showTrends && < NavLink className = 'column-link column-link--transparent' to = '/explore' data - preview - title - id = 'explore.title' data - preview - icon = 'hashtag' > < Icon className = 'column-link__icon' id = 'hashtag' fixedWidth / > < FormattedMessage id = 'explore.title' defaultMessage = 'Explore' / > < / N a v L i n k > }
< NavLink className = 'column-link column-link--transparent' to = '/public/local' data - preview - title - id = 'column.community' data - preview - icon = 'users' > < Icon className = 'column-link__icon' id = 'users' fixedWidth / > < FormattedMessage id = 'tabs_bar.local_timeline' defaultMessage = 'Local' / > < / N a v L i n k >
< NavLink className = 'column-link column-link--transparent' exact to = '/public' data - preview - title - id = 'column.public' data - preview - icon = 'globe' > < Icon className = 'column-link__icon' id = 'globe' fixedWidth / > < FormattedMessage id = 'tabs_bar.federated_timeline' defaultMessage = 'Federated' / > < / N a v L i n k >
{ ! signedIn && (
< React . Fragment >
< hr / >
< SignInBanner / >
< / R e a c t . F r a g m e n t >
) }
{ signedIn && (
< React . Fragment >
< NavLink className = 'column-link column-link--transparent' to = '/conversations' > < Icon className = 'column-link__icon' id = 'envelope' fixedWidth / > < FormattedMessage id = 'navigation_bar.direct' defaultMessage = 'Direct messages' / > < / N a v L i n k >
< NavLink className = 'column-link column-link--transparent' to = '/bookmarks' > < Icon className = 'column-link__icon' id = 'bookmark' fixedWidth / > < FormattedMessage id = 'navigation_bar.bookmarks' defaultMessage = 'Bookmarks' / > < / N a v L i n k >
< NavLink className = 'column-link column-link--transparent' to = '/lists' > < Icon className = 'column-link__icon' id = 'list-ul' fixedWidth / > < FormattedMessage id = 'navigation_bar.lists' defaultMessage = 'Lists' / > < / N a v L i n k >
< ListPanel / >
< hr / >
{ ! ! preferencesLink && < a className = 'column-link column-link--transparent' href = { preferencesLink } target = '_blank' > < Icon className = 'column-link__icon' id = 'cog' fixedWidth / > < FormattedMessage id = 'navigation_bar.preferences' defaultMessage = 'Preferences' / > < / a > }
< a className = 'column-link column-link--transparent' href = '#' onClick = { onOpenSettings } > < Icon className = 'column-link__icon' id = 'cogs' fixedWidth / > < FormattedMessage id = 'navigation_bar.app_settings' defaultMessage = 'App settings' / > < / a >
{ ! ! relationshipsLink && < a className = 'column-link column-link--transparent' href = { relationshipsLink } target = '_blank' > < Icon className = 'column-link__icon' id = 'users' fixedWidth / > < FormattedMessage id = 'navigation_bar.follows_and_followers' defaultMessage = 'Follows and followers' / > < / a > }
< / R e a c t . F r a g m e n t >
) }
{ showTrends && (
< React . Fragment >
< div className = 'flex-spacer' / >
< TrendsContainer / >
< / R e a c t . F r a g m e n t >
) }
< / d i v >
) ;
}
}