Merge branch 'sidenav-icon' into 'develop'

SidebarNavigationLink: use counter from icon component

See merge request soapbox-pub/soapbox-fe!1393

app/soapbox/components/sidebar-navigation-link.tsx

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