47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import Link from 'gatsby-link'
|
|
import LogoSaburly from "../images/logo-saburly.svg"
|
|
import Button from './Button'
|
|
|
|
import "./Header.css"
|
|
|
|
const Header = () => (
|
|
<header>
|
|
<nav className="flex items-center justify-between lg:p-6">
|
|
<div className="flex items-center flex-no-shrink text-white mr-6">
|
|
<Link to="/">
|
|
<img src={LogoSaburly} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
|
|
</Link>
|
|
</div>
|
|
|
|
<button className="menu_icon lg:invisible">
|
|
<span className="menu_bar-top" />
|
|
<span className="menu_bar-mid" />
|
|
<span className="menu_bar-bot" />
|
|
</button>
|
|
|
|
<div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
|
|
<ul className="flex text-sm justify-center lg:flex-grow">
|
|
<Link to="/services">
|
|
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
|
|
</li>
|
|
</Link>
|
|
<Link to="/about">
|
|
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">TEAM
|
|
</li>
|
|
</Link>
|
|
<Link to="/blog">
|
|
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">BLOG
|
|
</li>
|
|
</Link>
|
|
</ul>
|
|
|
|
<Button text="Contact" standard classes="rounded-full" url="/contact" />
|
|
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
)
|
|
|
|
export default Header
|