diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2022-10-09 15:55:32 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-09 15:55:32 +0200 |
commit | 07653246223251052f5150e1e74139bf8ff41ec4 (patch) | |
tree | b61d5697d912e366feadbf49ce44d4e57fa848f3 /app/javascript/mastodon/features/ui/components/column_link.js | |
parent | 2b00ccdbd555f9391aa87778f8b41eedcb7f8a04 (diff) |
Fix intermediary responsive layout, accessibility on navigation in web UI (#19324)
* Fix intermediary responsive layout, accessibility on navigation in web UI * `yarn test:jest -u` Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/column_link.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/column_link.js | 20 |
1 files changed, 12 insertions, 8 deletions
diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js index 0a25f1ea2..42da05c0a 100644 --- a/app/javascript/mastodon/features/ui/components/column_link.js +++ b/app/javascript/mastodon/features/ui/components/column_link.js @@ -1,37 +1,41 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; -const ColumnLink = ({ icon, text, to, href, method, badge }) => { +const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other }) => { + const className = classNames('column-link', { 'column-link--transparent': transparent }); const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null; + const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon; if (href) { return ( - <a href={href} className='column-link' data-method={method}> - <Icon id={icon} fixedWidth className='column-link__icon' /> + <a href={href} className={className} data-method={method} title={text} {...other}> + {iconElement} {text} {badgeElement} </a> ); } else { return ( - <Link to={to} className='column-link'> - <Icon id={icon} fixedWidth className='column-link__icon' /> + <NavLink to={to} className={className} title={text} {...other}> + {iconElement} {text} {badgeElement} - </Link> + </NavLink> ); } }; ColumnLink.propTypes = { - icon: PropTypes.string.isRequired, + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, text: PropTypes.string.isRequired, to: PropTypes.string, href: PropTypes.string, method: PropTypes.string, badge: PropTypes.node, + transparent: PropTypes.bool, }; export default ColumnLink; |