Created
May 23, 2020 11:33
-
-
Save KirdesMF/7c05f033c01425ce2c799cf9876d1cf4 to your computer and use it in GitHub Desktop.
Styled component separate file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Container = styled.header` | |
position: fixed; | |
top: 0; | |
height: 10%; | |
width: 100%; | |
display: grid; | |
grid-template-areas: 'social . nav .'; | |
grid-template-columns: 15% 1fr 1fr 15%; | |
grid-template-rows: 1fr; | |
background: ${(props) => props.theme.colors?.home}; | |
box-shadow: ${(props) => props.theme.options.shadow?.bottom}; | |
`; | |
const SocialMedia = styled.nav` | |
grid-area: social; | |
display: grid; | |
grid-auto-flow: column; | |
gap: 2rem; | |
overflow: hidden; | |
place-self: center; | |
`; | |
const Navigation = styled(motion.nav)` | |
grid-area: nav; | |
display: grid; | |
grid-auto-flow: column; | |
gap: 5rem; | |
overflow: hidden; | |
place-self: center; | |
`; | |
const Links = styled(NavLink)` | |
transition: color 0.5s ease-in-out; | |
color: ${(props) => props.theme.colors?.white}; | |
&:hover { | |
color: ${(props) => props.theme.colors?.black}; | |
} | |
&.active:hover, | |
&.active { | |
color: ${(props) => props.theme.colors?.home}; | |
text-shadow: ${(props) => props.theme.options.shadow?.text}; | |
} | |
`; | |
const MotionTitle = styled(motion.h1)` | |
padding: 1.2rem; | |
text-transform: uppercase; | |
font-family: ${({ theme }) => theme.fonts?.family.principal}; | |
font-size: clamp(0.5vmin, 2.5vmin, 5vmin); | |
`; | |
export const SHeader = { | |
Container, | |
SocialMedia, | |
Navigation, | |
Links, | |
MotionTitle, | |
}; | |
/**======================= Usage =================*/ | |
import { SHeader } from './Header.styled'; | |
const Header = () => { | |
return ( | |
<SHeader.Container> | |
<SHeader.SocialMedia> | |
{socialMedia.map((media) => ( | |
<a key={media.name} href={media.href}> | |
<Icon | |
name={media.name} | |
colorIcon="white" | |
hoverIcon="black" | |
sizeIcon="1.2vw" | |
/> | |
</a> | |
))} | |
</SHeader.SocialMedia> | |
<SHeader.Navigation | |
variants={variantsNav} | |
initial="initial" | |
animate="animate" | |
> | |
{navLinks.map((linksProfile) => ( | |
<SHeader.Links to={linksProfile.to} key={linksProfile.name}> | |
<SHeader.MotionTitle variants={variantsTitleNav}> | |
{linksProfile.name} | |
</SHeader.MotionTitle> | |
</SHeader.Links> | |
))} | |
</SHeader.Navigation> | |
</SHeader.Container> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment