fix(dashboard-v2): styling fixes for active link in navbar dropdown
This commit is contained in:
parent
0d485c2a7f
commit
0ec9b396aa
|
@ -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}
|
||||
</DropdownLink>
|
||||
</>
|
||||
<DropdownLink {...props}>
|
||||
{Icon ? <Icon /> : null}
|
||||
<span className="text-palette-500">{label}</span>
|
||||
</DropdownLink>
|
||||
);
|
||||
|
||||
DropdownMenuLink.propTypes = {
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in New Issue