Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-08 07:56:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(header): correctly gray out disabled menu links

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2019-08-23 17:12:59 -04:00
parent 67bb1c2cdd
commit ec07c9a31d
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/index.tsx
+5 -1
View File
@@ -9,7 +9,11 @@ interface IHeaderProps {
function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) { function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
return ( return (
<SC.MenuItem to={to} activeClassName="active"> <SC.MenuItem
to={to}
activeClassName="active"
className={to === "/" ? "disabled" : ""}
>
<SC.MenuItemText>{children}</SC.MenuItemText> <SC.MenuItemText>{children}</SC.MenuItemText>
<SC.MenuItemLine /> <SC.MenuItemLine />
</SC.MenuItem> </SC.MenuItem>
src/components/Header/styles.tsx
+4 -2
View File
@@ -158,14 +158,16 @@ export const MenuItem = styled(Link)`
border-radius: 3px; border-radius: 3px;
} }
&[href="/"] { &.disabled {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
opacity: 0.7; opacity: 0.7;
color: #fff !important;
} }
&[href="/"] ${MenuItemLine} { &.disabled ${MenuItemLine} {
bottom: 50%; bottom: 50%;
background: #fff !important;
} }
&.active { &.active {