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

refact(header): clean up home checks

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2019-08-23 17:13:06 -04:00
parent 8de39f7587
commit 7681e159d2
2 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/index.tsx
+4 -2
View File
@@ -28,9 +28,9 @@ export function Header({ isHome }: IHeaderProps) {
}, [isHome]) }, [isHome])
return ( return (
<SC.HeaderWrapper isHome={isHome}> <SC.HeaderWrapper className={isHome ? "is-home" : ""}>
<WavesTop /> <WavesTop />
<SC.FadedBottomWave faded={!isHome}> <SC.FadedBottomWave>
<WavesBottom /> <WavesBottom />
</SC.FadedBottomWave> </SC.FadedBottomWave>
@@ -68,10 +68,12 @@ export function Header({ isHome }: IHeaderProps) {
}} }}
/> />
<SC.InnerWrapper> <SC.InnerWrapper>
<SC.TitleWrapper>
<Link to="/"> <Link to="/">
<SC.Logo /> <SC.Logo />
</Link> </Link>
<SC.Title>The Programmer's Hangout</SC.Title> <SC.Title>The Programmer's Hangout</SC.Title>
</SC.TitleWrapper>
<SC.Menu> <SC.Menu>
<MenuItem to="/about">about</MenuItem> <MenuItem to="/about">about</MenuItem>
<MenuItem to="/rules">rules</MenuItem> <MenuItem to="/rules">rules</MenuItem>
src/components/Header/styles.tsx
+18 -9
View File
@@ -4,15 +4,19 @@ import styled from "styled-components"
import DiscordLogo from "../../images/discord-logo.svg" import DiscordLogo from "../../images/discord-logo.svg"
import TPHLogo from "../../images/tph-logo.svg" import TPHLogo from "../../images/tph-logo.svg"
export const HeaderWrapper = styled.header<{ isHome: boolean }>` export const HeaderWrapper = styled.header`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
position: relative; position: relative;
min-height: ${props => (props.isHome ? "100vh" : "auto")}; min-height: auto;
background: #121240; background: #121240;
overflow: hidden; overflow: hidden;
&.is-home {
min-height: 100vh;
}
` `
export const Title = styled.h1` export const Title = styled.h1`
@@ -33,22 +37,27 @@ export const Title = styled.h1`
} }
` `
export const FadedBottomWave = styled.div<{ faded: boolean }>` export const FadedBottomWave = styled.div`
position: absolute; position: absolute;
transform: translateY(${props => (props.faded ? "100%" : 0)}); transform: translateY(100%);
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s;
opacity: ${props => (props.faded ? 0 : 1)}; opacity: 0;
${props =>
props.faded &&
css`
svg { svg {
position: static; position: static;
} }
`}
.is-home & {
opacity: 1;
transform: translateY(0);
}
.is-home & svg {
position: static;
}
` `
export const StyledParticles = styled(Particles)<{ noop: number }>` export const StyledParticles = styled(Particles)<{ noop: number }>`