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

Merge branch 'improve-sidebar' into 'develop'

Browse source 
Improve sidebar link design

See merge request soapbox-pub/soapbox-fe!1390
This commit is contained in:
Justin 2022-05-16 13:22:37 +00:00
commit 31b7f8425f
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} ref={ref}
onClick={handleClick} onClick={handleClick}
className={classNames({ className={classNames({
'flex items-center py-2 text-sm font-semibold space-x-4': true, '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 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200': !isActive, 'text-gray-500 dark:text-gray-400': !isActive,
'text-gray-900 dark:text-white': isActive, 'text-primary-600 dark:text-white': isActive,
})} })}
> >
<span className={classNames({ <span className='relative'>
'relative rounded-lg inline-flex p-3': true,
'bg-primary-50 dark:bg-slate-700': !isActive,
'bg-primary-600': isActive,
})}
>
{withCounter && count > 0 ? ( {withCounter && count > 0 ? (
<span className='absolute -top-2 -right-2'> <span className='absolute -top-2 -right-2'>
<Counter count={count} /> <Counter count={count} />
@ -52,9 +47,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
<Icon <Icon
src={icon} src={icon}
className={classNames({ className={classNames({
'h-5 w-5': true, 'h-5 w-5 dark:group-hover:text-primary-500': true,
'text-primary-700 dark:text-white': !isActive, 'dark:text-primary-500': isActive,
'text-white': isActive,
})} })}
/> />
</span> </span>