63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
import React, { Component } from 'react'
|
|
import Link, { withPrefix } from 'gatsby-link'
|
|
import LogoSaburly from '../images/saburly-logo-purple.svg'
|
|
import Button from './Button'
|
|
|
|
import './Header.css'
|
|
|
|
let menuClasses =
|
|
'no-underline mt-4 lg:inline-block opacity-80 text-black font-medium lg:mt-0 hover:opacity-100 uppercase mr-4'
|
|
|
|
class Header extends Component {
|
|
render() {
|
|
const isHome = location.pathname === withPrefix('/')
|
|
return (
|
|
<header className="bg-saburly-light">
|
|
<nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
|
|
<Link to="/">
|
|
<div className="max-w-xs mr-8">
|
|
<img src={LogoSaburly} className="w-full" alt="Saburly Logo" />
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="side-toggle">
|
|
<button className="menu_icon visible lg:invisible">
|
|
<span className="menu_bar-top" />
|
|
<span className="menu_bar-mid" />
|
|
<span className="menu_bar-bot" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
|
|
<ul className="list-reset font- text-sm">
|
|
{!isHome && (
|
|
<Link to="/">
|
|
<li className={menuClasses}>Home</li>
|
|
</Link>
|
|
)}
|
|
<Link to="/services">
|
|
<li className={menuClasses}>Services</li>
|
|
</Link>
|
|
<Link to="/about">
|
|
<li className={menuClasses}>About Us</li>
|
|
</Link>
|
|
<Link to="/blog">
|
|
<li className={menuClasses}>Blog</li>
|
|
</Link>
|
|
|
|
<Button
|
|
text="Contact"
|
|
standard
|
|
classes="rounded-full font-medium text-black hover:shadow"
|
|
url="/contact"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Header
|