search bar positioning fixed

t007rushi · Apr 7, 2022 · c2ddc9d · c2ddc9d
1 parent 2c3a7e6
commit c2ddc9d
Showing 1 changed file with 26 additions and 22 deletions.
diff --git a/src/Layout/Header/Header.jsx b/src/Layout/Header/Header.jsx
@@ -1,17 +1,18 @@
 import React from "react";
 import "./note-header.css";
 import { AiOutlineSearch, AiOutlineMenu } from "react-icons/ai";
-import { MdDarkMode, MdLogout, MdLightMode} from "react-icons/md";
-import {BiArrowBack} from "react-icons/bi";
-import {IoMdOptions} from "react-icons/io";
+import { MdDarkMode, MdLogout, MdLightMode } from "react-icons/md";
+import { BiArrowBack } from "react-icons/bi";
+import { IoMdOptions } from "react-icons/io";
 import { useTheme } from "../../context/theme-context";
 import { useHeader } from "../../context/header-context";
 import { NavLink, useLocation } from "react-router-dom";
 import { useAuth } from "../../context/auth-context";
 
 export const Header = () => {
   const { theme, toggleTheme } = useTheme();
-  const { toggle, ShowFilters,showSearch,showSearchbar, hideSearchbar } = useHeader();
+  const { toggle, ShowFilters, showSearch, showSearchbar, hideSearchbar } =
+    useHeader();
   const { user, signOutHandler } = useAuth();
   const { pathname } = useLocation();
   const forbiddenpaths = ["/", "/login", "/signup"];
@@ -27,21 +28,19 @@ export const Header = () => {
           <i>MON</i>KEEP
         </NavLink>
       </div>
-      {user.isUserLoggedIn &&  (
-        <div className={ showSearch?"search-active":"search-hide"}>
-        <div className="flex-row header-mid">
-        <NavLink to="/notes"> <BiArrowBack className="header-icon" onClick={() =>{
-            hideSearchbar();
-          }} /></NavLink>
-          <NavLink to="/search"> <input
-            type="text"
-            placeholder="Search"
-            className="search-bar"
-          /></NavLink>
-          <NavLink to="/search"> <IoMdOptions className="filter-icon" onClick={() => {
-            ShowFilters();
-          }}/></NavLink>
-        </div>
+      {user.isUserLoggedIn && (
+        <div className={showSearch ? "search-active" : "search-hide"}>
+          <div className="flex-row header-mid">
+            <NavLink to="/notes">
+              <BiArrowBack className="header-icon" onClick={hideSearchbar} />
+            </NavLink>
+            <NavLink to="/search">
+              <input type="text" placeholder="Search" className="search-bar" />
+            </NavLink>
+            <NavLink to="/search">
+              <IoMdOptions className="filter-icon" onClick={ShowFilters} />
+            </NavLink>
+          </div>
         </div>
       )}
       <div
@@ -51,9 +50,14 @@ export const Header = () => {
             : "flex-row header-right"
         }
       >
-       { !showSearch && user.isUserLoggedIn && <AiOutlineSearch className="icon-active header-icon" onClick={() =>{
-showSearchbar()
-        }}/>}
+        {!showSearch && user.isUserLoggedIn && (
+          <AiOutlineSearch
+            className="icon-active header-icon"
+            onClick={() => {
+              showSearchbar();
+            }}
+          />
+        )}
         {theme === "light" ? (
           <MdDarkMode className="header-icon" onClick={toggleTheme} />
         ) : (