nochill/hilingriviw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix header

Browse Source
This commit is contained in:
NCanggoro 2023-08-29 12:06:48 +07:00
parent ccff6ae2cd
commit 2f6d54f072
5 changed files with 94 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/app.css
View File

@ -11,11 +11,29 @@
@media screen and (max-width: 488px) {
a.navLink{
display: none;
/* display: none; */
margin-top: 10px;
width: 100%;
padding: 0;
border-bottom: 1px solid white;
padding: 10px 0
}
div.nav-container {
padding: 0 20px;
height: 100vh;
/* align-items: start; */
justify-content: start;
flex-direction: column;
}
div.nav-container-disabled {
padding: 4px;
height: 0;
}
a.navLink-disabled {
display: none;
}
form.search-input {
@ -35,6 +53,11 @@
h1.title-dropdown {
display: none;
}
a.navLink:hover{
border-bottom-width: 1px;
margin-bottom: 0px;
}
}
@media screen and (max-width: 390px){

63
src/components/Header/index.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from "preact/compat";
import { useState } from "preact/hooks";
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.overflow = "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" : ""}`}>Lists</a>
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</a>
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News</a>
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Forum</a>
</div>
</header>
)
}
export default Header;

5
src/components/index.ts Normal file
View File

@ -0,0 +1,5 @@
import Header from "./Header";
export {
Header
}

2
src/layouts/Default/Default.tsx
View File

@ -1,4 +1,5 @@
import { ComponentChildren } from "preact";
import { Header } from "../../components";
type ChildrenProps = {
children: ComponentChildren
@ -7,6 +8,7 @@ type ChildrenProps = {
function DefaultLayout({ children }: ChildrenProps) {
return (
<>
<Header />
{children}
</>
)

46
src/pages/Home/index.tsx
View File

@ -2,59 +2,13 @@ import preactLogo from '../../assets/preact.svg';
import viteLogo from '/vite.svg'
import { useState } from "preact/hooks";
import { DefaultLayout } from '../../layouts/';
import React from 'preact/compat';
function Home() {
const [count, setCount] = useState(0)
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();
alert(e)
}
const onDropdown = (e): void => {
setDropdown(!dropdown)
// alert("bruh");
}
return (
<DefaultLayout>
<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">
<a href="#" className="navLink">Best places</a>
<a href="#" className="navLink">Discover</a>
<a href="#" className="navLink">Trending Places</a>
<a href="#" className="navLink">Lists</a>
<a href="#" className="navLink">Stories</a>
<a href="#" className="navLink">News</a>
<a href="#" className="navLink">Forum</a>
</div>
</header>
<div></div>
<div className="content">
<div className="flex flex-row">
<a href="https://vitejs.dev" target="_blank">