fix header

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){

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;

src/components/index.ts

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

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}
     </>
   )

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">