OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

make the Dress to Impress text clickable

Browse source 
oops, right, it was not part of the link! Now it is. Feels much better :)
This commit is contained in:
Emi Matchu 2020-09-21 03:18:32 -07:00
parent 1eeba40fac
commit a81060d5b8
1 changed files with 54 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/app/GlobalHeader.js
View file

@ -10,20 +10,9 @@ import HomeLinkIcon from "../images/home-link-icon.png";
import HomeLinkIcon2x from "../images/home-link-icon@2x.png";
function GlobalHeader() {
const { pathname } = useLocation();
const isHomePage = pathname === "/";
return (
<Box display="flex" alignItems="center" flexWrap="wrap">
<HomeLink showArrow={!isHomePage} marginRight="2" />
<Box
display="flex"
alignItems="center"
opacity={isHomePage ? "0" : "1"}
transition="0.2s opacity"
>
<DressToImpressTitle />
</Box>
<HomeLink marginRight="2" />
<Box marginLeft="auto">
<UserNavBarSection />
</Box>
@ -31,26 +20,34 @@ function GlobalHeader() {
);
}
function HomeLink({ showArrow, ...props }) {
function HomeLink(props) {
const { pathname } = useLocation();
const isHomePage = pathname === "/";
return (
<Box
as={Link}
to="/"
display="flex"
alignItems="center"
position="relative"
role="group"
{...props}
>
<Box
display="flex"
alignItems="center"
marginRight="2"
position="relative"
transition="all 0.2s"
opacity="0.8"
_hover={{ transform: "scale(1.1)", opacity: "1" }}
_focus={{ transform: "scale(1.1)", opacity: "1" }}
{...props}
_groupHover={{ transform: "scale(1.1)", opacity: "1" }}
_groupFocus={{ transform: "scale(1.1)", opacity: "1" }}
>
<Box
position="absolute"
right="100%"
opacity={showArrow ? "1" : "0"}
transform={showArrow ? "none" : "translateX(3px)"}
opacity={isHomePage ? "0" : "1"}
transform={isHomePage ? "translateX(3px)" : "none"}
transition="all 0.2s"
>
<ChevronLeftIcon />
@ -77,6 +74,20 @@ function HomeLink({ showArrow, ...props }) {
transition="border 0.2s"
/>
</Box>
<Box
fontFamily="Delicious"
fontWeight="600"
fontSize="2xl"
display={{ base: "none", sm: "block" }}
opacity={isHomePage ? "0" : "1"}
transition="all 0.2s"
marginRight="2"
_groupHover={{ fontWeight: "900" }}
_groupFocus={{ fontWeight: "900" }}
>
Dress to Impress
</Box>
</Box>
);
}
@ -121,20 +132,6 @@ function UserNavBarSection() {
}
}
function DressToImpressTitle(props) {
return (
<Box
fontFamily="Delicious"
fontWeight="bold"
fontSize="2xl"
display={{ base: "none", sm: "block" }}
{...props}
>
Dress to Impress
</Box>
);
}
const NavButton = React.forwardRef(({ icon, ...props }, ref) => {
const Component = icon ? IconButton : Button;