LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
View File

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

10
packages/dashboard-v2/src/components/NavBar/NavBar.js
View File

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