index.jsx 7.39 KB
Newer Older
1 2 3
import React from 'react';
import PropTypes from 'prop-types';
import tt from 'counterpart';
Iain Maitland's avatar
Iain Maitland committed
4
import CloseButton from 'app/components/elements/CloseButton';
5 6 7 8 9 10 11 12 13 14 15 16
import Icon from 'app/components/elements/Icon';
import { Link } from 'react-router';

const SidePanel = ({ alignment, visible, hideSidePanel, username }) => {
    if (process.env.BROWSER) {
        visible && document.addEventListener('click', hideSidePanel);
        !visible && document.removeEventListener('click', hideSidePanel);
    }

    const loggedIn =
        username === undefined
            ? 'show-for-small-only'
17
            : 'SidePanel__hide-signup';
18 19 20 21 22

    const makeExternalLink = (i, ix, arr) => {
        const cn = ix === arr.length - 1 ? 'last' : null;
        return (
            <li key={i.value} className={cn}>
23 24 25 26 27
                <a
                    href={i.link}
                    target={i.internal ? null : '_blank'}
                    rel="noopener noreferrer"
                >
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
                    {i.label}&nbsp;<Icon name="extlink" />
                </a>
            </li>
        );
    };

    const makeInternalLink = (i, ix, arr) => {
        const cn = ix === arr.length - 1 ? 'last' : null;
        return (
            <li key={i.value} className={cn}>
                <Link to={i.link}>{i.label}</Link>
            </li>
        );
    };

    const sidePanelLinks = {
        internal: [
            {
                value: 'welcome',
                label: tt('navigation.welcome'),
                link: `/welcome`,
            },
            {
                value: 'faq',
                label: tt('navigation.faq'),
                link: `/faq.html`,
            },
            {
                value: 'market',
                label: tt('navigation.currency_market'),
                link: `/market`,
            },
            {
                value: 'recover_account_step_1',
                label: tt('navigation.stolen_account_recovery'),
                link: `/recover_account_step_1`,
            },
            {
                value: 'change_password',
                label: tt('navigation.change_account_password'),
                link: `/change_password`,
            },
            {
                value: 'vote_for_witnesses',
                label: tt('navigation.vote_for_witnesses'),
                link: `/~witnesses`,
            },
Efe's avatar
Efe committed
75
            {
76 77 78
                value: 'proposals',
                label: tt('navigation.steem_proposals'),
                link: `/proposals`,
Efe's avatar
Efe committed
79
            },
80 81 82 83 84
        ],
        exchanges: [
            {
                value: 'blocktrades',
                label: 'Blocktrades',
85 86 87 88 89
                link: username
                    ? `https://blocktrades.us/?input_coin_type=eth&output_coin_type=steem&receive_address=${
                          username
                      }`
                    : `https://blocktrades.us/?input_coin_type=eth&output_coin_type=steem`,
90 91 92 93
            },
            {
                value: 'gopax',
                label: 'GOPAX',
Seokjun Kim's avatar
Seokjun Kim committed
94
                link: 'https://www.gopax.co.kr/exchange/steem-krw/',
95 96 97 98 99 100
            },
        ],
        external: [
            {
                value: 'chat',
                label: tt('navigation.chat'),
101
                link: 'https://steem.chat/home',
102
            },
103 104 105 106 107
            {
                value: 'jobs',
                label: tt('navigation.jobs'),
                link: 'https://jobs.lever.co/steemit',
            },
108 109 110
            {
                value: 'tools',
                label: tt('navigation.app_center'),
111
                link: 'https://steemprojects.com/',
112
            },
113 114 115 116 117
            {
                value: 'business',
                label: tt('navigation.business_center'),
                link: 'https://steemeconomy.com/',
            },
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
            {
                value: 'api_docs',
                label: tt('navigation.api_docs'),
                link: 'https://developers.steem.io/',
            },
        ],
        organizational: [
            {
                value: 'bluepaper',
                label: tt('navigation.bluepaper'),
                link: 'https://steem.io/steem-bluepaper.pdf',
            },
            {
                value: 'smt_whitepaper',
                label: tt('navigation.smt_whitepaper'),
                link: 'https://smt.steem.io/',
            },
            {
                value: 'whitepaper',
                label: tt('navigation.whitepaper'),
                link: 'https://steem.io/SteemWhitePaper.pdf',
            },
            {
                value: 'about',
                label: tt('navigation.about'),
Roger Jungemann's avatar
Roger Jungemann committed
143
                link: '/about.html',
144
                internal: true,
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183
            },
        ],
        legal: [
            {
                value: 'privacy',
                label: tt('navigation.privacy_policy'),
                link: '/privacy.html',
            },
            {
                value: 'tos',
                label: tt('navigation.terms_of_service'),
                link: '/tos.html',
            },
        ],
        extras: [
            {
                value: 'login',
                label: tt('g.sign_in'),
                link: '/login.html',
            },
            {
                value: 'signup',
                label: tt('g.sign_up'),
                link: 'https://signup.steemit.com',
            },
            {
                value: 'post',
                label: tt('g.post'),
                link: '/submit.html',
            },
        ],
    };

    return (
        <div className="SidePanel">
            <div className={(visible ? 'visible ' : '') + alignment}>
                <CloseButton onClick={hideSidePanel} />
                <ul className={`vertical menu ${loggedIn}`}>
                    {makeInternalLink(
184
                        sidePanelLinks.extras[0],
185
                        0,
186
                        sidePanelLinks.extras
187 188
                    )}
                    {makeExternalLink(
189
                        sidePanelLinks.extras[1],
190
                        1,
191
                        sidePanelLinks.extras
192 193
                    )}
                    {makeInternalLink(
194
                        sidePanelLinks.extras[2],
195
                        2,
196
                        sidePanelLinks.extras
197 198 199
                    )}
                </ul>
                <ul className="vertical menu">
200
                    {sidePanelLinks.internal.map(makeInternalLink)}
201 202 203 204 205 206 207
                </ul>
                <ul className="vertical menu">
                    <li>
                        <a className="menu-section">
                            {tt('navigation.third_party_exchanges')}
                        </a>
                    </li>
208
                    {sidePanelLinks.exchanges.map(makeExternalLink)}
209 210
                </ul>
                <ul className="vertical menu">
211
                    {sidePanelLinks.external.map(makeExternalLink)}
212 213
                </ul>
                <ul className="vertical menu">
214
                    {sidePanelLinks.organizational.map(makeExternalLink)}
215 216
                </ul>
                <ul className="vertical menu">
217
                    {sidePanelLinks.legal.map(makeInternalLink)}
218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235
                </ul>
            </div>
        </div>
    );
};

SidePanel.propTypes = {
    alignment: PropTypes.oneOf(['left', 'right']).isRequired,
    visible: PropTypes.bool.isRequired,
    hideSidePanel: PropTypes.func.isRequired,
    username: PropTypes.string,
};

SidePanel.defaultProps = {
    username: undefined,
};

export default SidePanel;