118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
|
// Package imports.
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import React from 'react';
|
||
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||
|
|
import { defineMessages } from 'react-intl';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
|
||
|
|
// Components.
|
||
|
|
import Icon from 'flavours/glitch/components/icon';
|
||
|
|
|
||
|
|
// Utils.
|
||
|
|
import { conditionalRender } from 'flavours/glitch/util/react_helpers';
|
||
|
|
|
||
|
|
// Messages.
|
||
|
|
const messages = defineMessages({
|
||
|
|
community: {
|
||
|
|
defaultMessage: 'Local timeline',
|
||
|
|
id: 'navigation_bar.community_timeline',
|
||
|
|
},
|
||
|
|
home_timeline: {
|
||
|
|
defaultMessage: 'Home',
|
||
|
|
id: 'tabs_bar.home',
|
||
|
|
},
|
||
|
|
logout: {
|
||
|
|
defaultMessage: 'Logout',
|
||
|
|
id: 'navigation_bar.logout',
|
||
|
|
},
|
||
|
|
notifications: {
|
||
|
|
defaultMessage: 'Notifications',
|
||
|
|
id: 'tabs_bar.notifications',
|
||
|
|
},
|
||
|
|
public: {
|
||
|
|
defaultMessage: 'Federated timeline',
|
||
|
|
id: 'navigation_bar.public_timeline',
|
||
|
|
},
|
||
|
|
settings: {
|
||
|
|
defaultMessage: 'App settings',
|
||
|
|
id: 'navigation_bar.app_settings',
|
||
|
|
},
|
||
|
|
start: {
|
||
|
|
defaultMessage: 'Getting started',
|
||
|
|
id: 'getting_started.heading',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// The component.
|
||
|
|
export default function DrawerHeader ({
|
||
|
|
columns,
|
||
|
|
intl,
|
||
|
|
onSettingsClick,
|
||
|
|
}) {
|
||
|
|
|
||
|
|
// Only renders the component if the column isn't being shown.
|
||
|
|
const renderForColumn = conditionalRender.bind(
|
||
|
|
columnId => !columns || !columns.some(
|
||
|
|
column => column.get('id') === columnId
|
||
|
|
)
|
||
|
|
);
|
||
|
|
|
||
|
|
// The result.
|
||
|
|
return (
|
||
|
|
<nav className='drawer--header'>
|
||
|
|
<Link
|
||
|
|
aria-label={intl.formatMessage(messages.start)}
|
||
|
|
title={intl.formatMessage(messages.start)}
|
||
|
|
to='/getting-started'
|
||
|
|
><Icon icon='asterisk' /></Link>
|
||
|
|
{renderForColumn('HOME', (
|
||
|
|
<Link
|
||
|
|
aria-label={intl.formatMessage(messages.home_timeline)}
|
||
|
|
title={intl.formatMessage(messages.home_timeline)}
|
||
|
|
to='/timelines/home'
|
||
|
|
><Icon icon='home' /></Link>
|
||
|
|
))}
|
||
|
|
{renderForColumn('NOTIFICATIONS', (
|
||
|
|
<Link
|
||
|
|
aria-label={intl.formatMessage(messages.notifications)}
|
||
|
|
title={intl.formatMessage(messages.notifications)}
|
||
|
|
to='/notifications'
|
||
|
|
><Icon icon='bell' /></Link>
|
||
|
|
))}
|
||
|
|
{renderForColumn('COMMUNITY', (
|
||
|
|
<Link
|
||
|
|
aria-label={intl.formatMessage(messages.community)}
|
||
|
|
title={intl.formatMessage(messages.community)}
|
||
|
|
to='/timelines/public/local'
|
||
|
|
><Icon icon='users' /></Link>
|
||
|
|
))}
|
||
|
|
{renderForColumn('PUBLIC', (
|
||
|
|
<Link
|
||
|
|
aria-label={intl.formatMessage(messages.public)}
|
||
|
|
title={intl.formatMessage(messages.public)}
|
||
|
|
to='/timelines/public'
|
||
|
|
><Icon icon='globe' /></Link>
|
||
|
|
))}
|
||
|
|
<a
|
||
|
|
aria-label={intl.formatMessage(messages.settings)}
|
||
|
|
onClick={onSettingsClick}
|
||
|
|
role='button'
|
||
|
|
title={intl.formatMessage(messages.settings)}
|
||
|
|
tabIndex='0'
|
||
|
|
><Icon icon='cogs' /></a>
|
||
|
|
<a
|
||
|
|
aria-label={intl.formatMessage(messages.logout)}
|
||
|
|
data-method='delete'
|
||
|
|
href='/auth/sign_out'
|
||
|
|
title={intl.formatMessage(messages.logout)}
|
||
|
|
><Icon icon='sign-out' /></a>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
DrawerHeader.propTypes = {
|
||
|
|
columns: ImmutablePropTypes.list,
|
||
|
|
intl: PropTypes.object,
|
||
|
|
onSettingsClick: PropTypes.func,
|
||
|
|
};
|