65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import React from "preact/compat";
|
|
import { useState } from "preact/hooks";
|
|
import './style.css';
|
|
|
|
|
|
function Header() {
|
|
|
|
const [searchVal, setSearchVal] = useState('');
|
|
const [dropdown, setDropdown] = useState(false);
|
|
|
|
const onInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
|
const val = e.target as HTMLInputElement;
|
|
setSearchVal(val.value)
|
|
}
|
|
|
|
const onSearchSubmit = (e: React.TargetedEvent<HTMLFormElement>): void => {
|
|
e.preventDefault();
|
|
}
|
|
|
|
const onDropdown = (): void => {
|
|
document.body.style.overflow = "hidden"
|
|
|
|
if(dropdown) {
|
|
document.body.style.overflowX = "hidden";
|
|
document.body.style.overflowY = "scroll";
|
|
}
|
|
setDropdown(!dropdown)
|
|
}
|
|
|
|
return (
|
|
<header>
|
|
<div className="flex flex-row content">
|
|
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>HilingRiviw</h1>
|
|
<form onSubmit={onSearchSubmit} className={`search-input ${dropdown ? "search-input-dropdown" : ""}`}>
|
|
<label>
|
|
<input
|
|
type="text"
|
|
value={searchVal}
|
|
onInput={onInput}
|
|
placeholder="Yogyakarta, Pantai Cidaun ..."
|
|
class="text-input-search"
|
|
/>
|
|
</label>
|
|
</form>
|
|
<button onClick={onDropdown} className="dropdown-menu" style={{ backgroundColor: "#4b4b4b", padding: 5, margin: 'auto 0', borderRadius: 10, marginLeft: 'auto' }}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
|
|
</button>
|
|
</div>
|
|
<div className={`nav-container ${!dropdown ? "nav-container-disabled" : ""}`}>
|
|
{dropdown &&
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Home</a>
|
|
}
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Best places</a>
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Trending Places</a>
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</a>
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News / Events</a>
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Forum</a>
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Sign in</a>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default Header; |