lbry-desktop/ui/component/sideBar/view.jsx

111 lines
3.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-03-28 17:53:13 +01:00
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
2019-09-26 18:07:11 +02:00
import React from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-06-11 20:10:58 +02:00
import Tag from 'component/tag';
2019-07-17 22:49:06 +02:00
import StickyBox from 'react-sticky-box/dist/esnext';
2019-09-26 18:07:11 +02:00
import 'css-doodle';
import Spinner from 'component/spinner';
2018-03-26 23:32:43 +02:00
type Props = {
2019-06-11 20:10:58 +02:00
subscriptions: Array<Subscription>,
followedTags: Array<Tag>,
2019-08-21 22:54:44 +02:00
email: ?string,
2019-09-26 18:07:11 +02:00
obscureSideBar: boolean,
uploadCount: number,
2018-03-26 23:32:43 +02:00
};
2019-06-11 20:10:58 +02:00
function SideBar(props: Props) {
const { subscriptions, followedTags, obscureSideBar, uploadCount } = props;
2019-07-17 22:49:06 +02:00
function buildLink(path, label, icon, guide) {
return {
navigate: path ? `$/${path}` : '/',
label,
icon,
guide,
};
}
2019-04-19 23:15:41 +02:00
2019-09-26 18:07:11 +02:00
return obscureSideBar ? (
<StickyBox offsetTop={100} offsetBottom={20}>
<div className="card navigation--placeholder">
<div className="wrap">
<h2>LBRY</h2>
<p>{__('The best decentralized content platform on the web.')}</p>
</div>
</div>
</StickyBox>
) : (
2019-07-23 10:05:51 +02:00
<StickyBox offsetTop={100} offsetBottom={20}>
2019-09-26 18:07:11 +02:00
<nav className="navigation">
<ul className="navigation-links">
{[
{
...buildLink(null, __('Home'), ICONS.HOME),
},
// @if TARGET='app'
{
...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
},
// @endif
{
...buildLink(PAGES.CHANNELS, __('Channels'), ICONS.CHANNEL),
},
2019-09-26 18:07:11 +02:00
{
...buildLink(
PAGES.PUBLISHED,
uploadCount ? (
<span>
{__('Publishes')}
<Spinner type="small" />
</span>
) : (
__('Publishes')
),
ICONS.PUBLISH
),
2019-09-26 18:07:11 +02:00
},
].map(linkProps => (
<li key={linkProps.navigate}>
2019-09-26 18:07:11 +02:00
<Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
</li>
))}
</ul>
2019-08-27 16:43:42 +02:00
2019-09-26 18:07:11 +02:00
<Button
navigate={`/$/${PAGES.FOLLOWING}`}
label={__('Customize')}
icon={ICONS.EDIT}
className="navigation-link"
activeClass="navigation-link--active"
/>
2019-09-27 20:56:15 +02:00
<section className="navigation-links__inline">
<ul className="navigation-links--small tags--vertical">
{followedTags.map(({ name }, key) => (
<li className="navigation-link__wrapper" key={name}>
<Tag navigate={`/$/tags?t${name}`} name={name} />
</li>
))}
</ul>
<ul className="navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper">
<Button
navigate={uri}
label={channelName}
className="navigation-link"
activeClass="navigation-link--active"
/>
</li>
))}
</ul>
</section>
2019-09-26 18:07:11 +02:00
</nav>
2019-07-17 22:49:06 +02:00
</StickyBox>
2019-06-11 20:10:58 +02:00
);
}
2018-03-26 23:32:43 +02:00
export default SideBar;