bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve sidebar link design

Browse source
This commit is contained in:
Justin 2022-05-16 08:58:16 -04:00
parent 379fb61cd4
commit 4c31cf2ba1
1 changed files with 6 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/soapbox/components/sidebar-navigation-link.tsx
View file

@ -32,17 +32,12 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
ref={ref}
onClick={handleClick}
className={classNames({
'flex items-center py-2 text-sm font-semibold space-x-4': true,
'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200': !isActive,
'text-gray-900 dark:text-white': isActive,
'flex items-center p-3 text-sm font-semibold space-x-4 rounded-full group hover:bg-primary-200/80 dark:hover:bg-primary-900/60 hover:text-primary-600 dark:hover:text-gray-200': true,
'text-gray-500 dark:text-gray-400': !isActive,
'text-primary-600 dark:text-white': isActive,
})}
>
<span className={classNames({
'relative rounded-lg inline-flex p-3': true,
'bg-primary-50 dark:bg-slate-700': !isActive,
'bg-primary-600': isActive,
})}
>
<span className='relative'>
{withCounter && count > 0 ? (
<span className='absolute -top-2 -right-2'>
<Counter count={count} />
@ -52,9 +47,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
<Icon
src={icon}
className={classNames({
'h-5 w-5': true,
'text-primary-700 dark:text-white': !isActive,
'text-white': isActive,
'h-5 w-5 dark:group-hover:text-primary-500': true,
'dark:text-primary-500': isActive,
})}
/>
</span>