Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind, PostCSS, Styled-JSX and NextJS
import React from 'react'
import { Link } from 'systems/Core/Link'
import css from 'styled-jsx/css'
export const Header = () => {
return (
<header className="Root">
<img src="/logo.svg" width={100} />
<div className="MainMenu">
<ul className="MenuList">
<li>
<Link className={linkStyles.className} href="/">
Home
</Link>
</li>
<li>
<Link className={linkStyles.className} href="/blog">
Blog
</Link>
</li>
<li>
<Link className={linkStyles.className} href="/contact">
Contact
</Link>
</li>
</ul>
</div>
<div className="SocialMedia">
<span>Follow us</span>
<ul className="MenuList">
<li>
<a href="#">
<img src="/icons/instagram.svg" width={30} alt="Instagram" />
</a>
</li>
<li>
<a href="#">
<img src="/icons/twitter.svg" width={30} alt="Twitter" />
</a>
</li>
<li>
<a href="#">
<img src="/icons/github.svg" width={30} alt="Github" />
</a>
</li>
<li>
<a href="#">
<img src="/icons/facebook.svg" width={30} alt="Facebook" />
</a>
</li>
</ul>
</div>
<ul className="Flags MenuList">
<li>
<a href="#">
<img src="/flags/eua.svg" width={30} alt="English" />
</a>
</li>
<li>
<a href="#">
<img src="/flags/br.svg" width={30} alt="Portuguese" />
</a>
</li>
</ul>
<style jsx>{styles}</style>
{linkStyles.styles}
</header>
)
}
const styles = css`
.Root {
@apply px-10 py-8 flex items-center text-white shadow-sm border-b border-border;
}
.MenuList {
@apply grid grid-flow-col gap-3 items-center;
}
.MainMenu {
@apply flex-1;
.MenuList {
@apply pl-12;
grid-auto-columns: min-content;
}
}
.SocialMedia {
@apply flex items-center;
span {
@apply pr-4 text-gray-500;
}
a img {
@apply opacity-75;
}
a:hover img {
@apply opacity-100;
}
}
.Flags {
@apply pl-12;
}
`
const linkStyles = css.resolve`
a {
@apply py-2 px-4;
}
a,
a:hover {
@apply no-underline text-lg text-gray-500 cursor-pointer rounded-md;
}
a:hover,
a.active {
@apply text-white;
background: theme('colors.header.menuItemBg');
}
`
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.