moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SidebarNavigationLink: use counter from icon component

This commit is contained in:
Alex Gleason 2022-05-16 10:32:00 -05:00
parent beb58a7d86
commit 5b00d1de13
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 2 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/soapbox/components/sidebar-navigation-link.tsx
View File

@ -2,7 +2,7 @@ import classNames from 'classnames';
import React from 'react'; import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { Icon, Text, Counter } from './ui'; import { Icon, Text } from './ui';
interface ISidebarNavigationLink { interface ISidebarNavigationLink {
count?: number, count?: number,
@ -15,7 +15,6 @@ interface ISidebarNavigationLink {
const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => { const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
const { icon, text, to = '', count, onClick } = props; const { icon, text, to = '', count, onClick } = props;
const isActive = location.pathname === to; const isActive = location.pathname === to;
const withCounter = typeof count !== 'undefined';
const handleClick: React.EventHandler<React.MouseEvent> = (e) => { const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
if (onClick) { if (onClick) {
@ -38,14 +37,9 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
})} })}
> >
<span className='relative'> <span className='relative'>
{withCounter && count > 0 ? (
<span className='absolute -top-2 -right-2'>
<Counter count={count} />
</span>
) : null}
<Icon <Icon
src={icon} src={icon}
count={count}
className={classNames({ className={classNames({
'h-5 w-5 dark:group-hover:text-primary-500': true, 'h-5 w-5 dark:group-hover:text-primary-500': true,
'dark:text-primary-500': isActive, 'dark:text-primary-500': isActive,