diff --git a/src/app.css b/src/app.css index cc3ba2c..441d105 100644 --- a/src/app.css +++ b/src/app.css @@ -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){ diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..2039d97 --- /dev/null +++ b/src/components/Header/index.tsx @@ -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; \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..4dbc380 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,5 @@ +import Header from "./Header"; + +export { + Header +} \ No newline at end of file diff --git a/src/layouts/Default/Default.tsx b/src/layouts/Default/Default.tsx index 8adeaee..b26f75c 100644 --- a/src/layouts/Default/Default.tsx +++ b/src/layouts/Default/Default.tsx @@ -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} </> ) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index f2897ec..2acc3aa 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -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">