fix(dashboard-v2): styling fixes for active link in navbar dropdown

This commit is contained in:
Michał Leszczyk 2022-03-14 16:58:45 +01:00
parent 0d485c2a7f
commit 0ec9b396aa
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
2 changed files with 13 additions and 9 deletions

View File

@ -3,18 +3,16 @@ import PropTypes from "prop-types";
const DropdownLink = styled.a.attrs({
className: `m-0 border-t border-palette-200/50 h-[60px]
whitespace-nowrap transition-colors text-current
whitespace-nowrap transition-colors
hover:bg-palette-100/50 flex items-center
pr-8 pl-6 py-4 gap-4 first:border-0`,
})``;
export const DropdownMenuLink = ({ active, icon: Icon, label, ...props }) => (
<>
<DropdownLink {...props}>
{Icon ? <Icon className={active ? "text-primary" : "text-current"} /> : null}
{label}
{Icon ? <Icon /> : null}
<span className="text-palette-500">{label}</span>
</DropdownLink>
</>
);
DropdownMenuLink.propTypes = {

View File

@ -68,8 +68,14 @@ export const NavBar = () => (
</NavBarSection>
<NavBarSection className="dropdown-area justify-end">
<DropdownMenu title="My account">
<DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
<DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
<DropdownMenuLink to="/settings" as={Link} activeClassName="text-primary" icon={CogIcon} label="Settings" />
<DropdownMenuLink
to="/logout"
as={Link}
activeClassName="text-primary"
icon={LockClosedIcon}
label="Log out"
/>
</DropdownMenu>
</NavBarSection>
</NavBarBody>