senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add functionality for dynamic header movement, design tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-08-30 09:57:48 +02:00
parent 10e200fbd6
commit 7b76680ec4
14 changed files with 258 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/Header.js
View File

@@ -4,6 +4,8 @@ import LogoSaburly from '../images/saburly-logo-4.svg'
import LogoSaburlyWhite from '../images/saburly-logo-white.svg'
import Button from './Button'
import Headroom from 'react-headroom'
import './Header.css'
let menuClasses =
@@ -12,48 +14,50 @@ let menuClasses =
class Header extends Component {
render() {
return (
<header className="saburly-main-bg saburly-bottom-shadow">
<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={LogoSaburlyWhite}
className="w-full saburly-logo"
alt="Saburly Logo"
/>
<Headroom>
<header className="saburly-main-bg saburly-menu saburly-bottom-shadow">
<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={LogoSaburlyWhite}
className="w-full saburly-logo"
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>
</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">
<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>
<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">
<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-white hover:shadow"
url="/contact"
/>
</ul>
</div>
</nav>
</header>
<Button
text="Contact"
standard
classes="rounded-full font-medium text-white hover:shadow"
url="/contact"
/>
</ul>
</div>
</nav>
</header>
</Headroom>
)
}
}