Skip to content

Instantly share code, notes, and snippets.

@pedronauck

pedronauck/Header.tsx

Created July 11, 2020 00:11
Show Gist options
  • Save pedronauck/04e45d190d82367960d979f333bc3470 to your computer and use it in GitHub Desktop.
Save pedronauck/04e45d190d82367960d979f333bc3470 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pedronauck created this gist Jul 11, 2020.
    117 changes: 117 additions & 0 deletions Header.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,117 @@
    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');
    }
    `