fixing index text input

src/app.css

@@ -19,18 +19,63 @@
   }
 
   form.search-input {
-    display: none
+    display: none;
+    margin-left: 0;
   }
 
   button.dropdown-menu {
     display: block;
   }
+
+  .search-input-dropdown {
+    margin-right: 10px;
+    display: block !important;
+  }
+
+  h1.title-dropdown {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 390px){
+  input.text-input-search {
+    width: 230px;
+  }
 }
 
 .dropdown-menu {
   display: none;
 }
 
+.search-input {
+  margin-left: auto;
+}
+
+label {
+  position: relative;
+}
+
+label:before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  width: 18px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='18' height='18' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.text-input-search {
+  padding: 12px 20px 12px 40px;
+  border-radius: 12px;
+  width: 325px; 
+  font-size: 1em; 
+  background-color: #4b4b4b;
+}
+
+.title {
+  font-size: 32px;
+}
 
 .content {
   max-width: 1280px;
@@ -44,6 +89,7 @@
   font-size: 14px;
 }
 
+
 .nav-container {
   background-color: #4b4b4b;
   padding: 10px 0;

src/pages/Home/index.tsx

@@ -7,6 +7,7 @@ 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;
@@ -19,35 +20,36 @@ function Home() {
   }
 
   const onDropdown = (e): void => {
-    alert("bruh");
+    setDropdown(!dropdown)
+    // alert("bruh");
   }
 
   return (
     <DefaultLayout>
       <header>
-        <div className="content">
-          <div className="flex flex-row justify-between">
-            <h1 style={{ fontSize: '32px' }}>HilingRiviw</h1>
-            <form onSubmit={onSearchSubmit} className="search-input">
-              <input
-                type="text"
-                value={searchVal}
-                onInput={onInput}
-                placeholder="Yogyakarta, Pantai Cidaun, Gedung DPR ..."
-                style={{ padding: '12px 24px 12px 40px', borderRadius: 12, width: '100%', fontSize: '1em', backgroundColor: '#4b4b4b' }}
-              />
-              <svg style={{ position: 'absolute', top: '2em', padding: '0 0 0 5px' }} xmlns="http://www.w3.org/2000/svg" height="18" fill='white' viewBox="0 -960 960 960" width="36"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" /></svg>
+          <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 }}>
+            <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>
         <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>