Skip to content

Instantly share code, notes, and snippets.

@KirdesMF KirdesMF/styled.js
Created May 23, 2020

Embed
What would you like to do?
Styled component separate file
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
You can’t perform that action at this time.