103 lines
4.7 KiB
TypeScript
103 lines
4.7 KiB
TypeScript
import React from "preact/compat";
|
|
import { useState } from "preact/hooks";
|
|
import './style.css';
|
|
import { useSelector } from "react-redux";
|
|
import { UserRootState } from "../../store/type";
|
|
|
|
|
|
function Header() {
|
|
const [searchVal, setSearchVal] = useState('');
|
|
const [dropdown, setDropdown] = useState(false);
|
|
const [pageState, setPageState] = useState({
|
|
profileMenu: false
|
|
})
|
|
|
|
const user = useSelector((state: UserRootState) => state.auth)
|
|
|
|
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">
|
|
<a href={"/"}>
|
|
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</h1>
|
|
</a>
|
|
<div className={'user-img self-center mr-5'} style={dropdown ? { display: 'none' } : ''}>
|
|
<a href={user.username ? '#' : '/login'} onClick={() => user.username ? setPageState({ ...pageState, profileMenu: !pageState.profileMenu }) : ''}>
|
|
<img
|
|
loading={'lazy'}
|
|
style={{ width: 40, borderRadius: 15 }}
|
|
src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
|
|
/>
|
|
</a>
|
|
{user.username &&
|
|
<div className={'profile-dropdown-img bg-secondary text-left'} style={pageState.profileMenu ? { display: 'block'} : { display: 'none'}}>
|
|
<a href={'#'}><div className={'p-2'}>Profile</div></a>
|
|
<a href={'#'}><div className={'p-2'}>Feed</div></a>
|
|
<a href={'#'}><div className={'p-2'}>Add location</div></a>
|
|
<a href={'#'}><div className={'p-2'}>Logout</div></a>
|
|
{/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
|
|
{/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
|
|
</div>
|
|
}
|
|
</div>
|
|
<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 bg-secondary ${dropdown ? 'ml-auto' : ''}`} style={{ padding: 5, borderRadius: 10 }}>
|
|
<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="/best-places" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Top Places</a>
|
|
<a href="/discover" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>
|
|
<a href="/stories" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</a>
|
|
<a href="/news-events" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News / Events</a>
|
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Forum</a>
|
|
<div className={'profile-container'}>
|
|
<a href={user.username ? '#' : '/login'} onClick={() => user.username ? setPageState({ ...pageState, profileMenu: !pageState.profileMenu }) : ''} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>{user.username ? user.username : 'Sign in'}</a>
|
|
{user && screen.width > 600 &&
|
|
<div className={'profile-dropdown bg-secondary ml-6'} style={pageState.profileMenu ? { display: 'block' } : {display: 'none'}}>
|
|
<a href={'#'}><div className={'p-1'}>Profile</div></a>
|
|
<a href={'#'}><div className={'p-1'}>Feed</div></a>
|
|
<a href={'#'}><div className={'p-1'}>Add location</div></a>
|
|
<a href={'#'}><div className={'p-1'}>Logout</div></a>
|
|
{/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
|
|
{/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default Header; |