chore: fixing search function when logged in

Author: Hubert Koster

src/components/AccountSwitcher/account_switcher.module.scss

@@ -50,7 +50,7 @@
     }
   }
 
-  > button {
+  > .accountSwitcherButton {
     display: flex;
     cursor: pointer;
     font-weight: bold;

src/components/AccountSwitcher/index.tsx

@@ -7,21 +7,30 @@ import CurrencyIcon from '../CurrencyIcon';
 import SelectedAccount from '../CustomSelectDropdown/account-dropdown/SelectedAccount';
 import AccountDropdown from '../CustomSelectDropdown/account-dropdown/AccountDropdown';
 import styles from './account_switcher.module.scss';
+import SearchButton from '../SearchButton';
 
 const AccountSwitcher = () => {
   const { logout } = useLogout();
 
   const { currentLoginAccount } = useAuthContext();
   const [is_toggle_dropdown, setToggleDropdown] = useState(false);
+  const [toggle_search, setToggleSearch] = useState<boolean>(false);
   const dropdown_toggle = is_toggle_dropdown ? styles.active : styles.inactive;
+  const search_toggle = toggle_search ? 'search-open' : 'search-closed';
   const is_demo = currentLoginAccount.name.includes('VRTC') ? styles.demo : '';
 
   const dropdownRef = useRef(null);
   useClickOutsideDropdown(dropdownRef, setToggleDropdown, false);
 
   return (
-    <div ref={dropdownRef} className={`${styles.accountSwitcher} ${dropdown_toggle}`}>
-      <button onClick={() => setToggleDropdown((prev) => !prev)} className={is_demo}>
+    <div
+      ref={dropdownRef}
+      className={`right-navigation ${styles.accountSwitcher} ${dropdown_toggle} ${search_toggle}`}
+    >
+      <button
+        onClick={() => setToggleDropdown((prev) => !prev)}
+        className={`${is_demo} ${styles.accountSwitcherButton}`}
+      >
         <div className={styles.currencyIconContainer}>
           <CurrencyIcon currency={isNotDemoCurrency(currentLoginAccount)} />
         </div>
@@ -55,6 +64,7 @@ const AccountSwitcher = () => {
           </div>
         </div>
       )}
+      <SearchButton setToggleSearch={setToggleSearch} toggle_search={toggle_search} />
     </div>
   );
 };

src/components/SearchButton/SearchButton.module.scss

@@ -0,0 +1,11 @@
+@use 'src/styles/utility' as *;
+
+.searchButton {
+    width: rem(2.4);
+    height: rem(2.4);
+    background-image: url('/img/search-bold.svg');
+    background-repeat: no-repeat;
+    background-size: rem(1.6) rem(1.6);
+    background-position: center;
+    cursor: pointer;
+}

src/components/SearchButton/index.tsx

@@ -0,0 +1,66 @@
+import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import { useLocation } from '@docusaurus/router';
+import styles from './SearchButton.module.scss';
+
+type TSearchButton = {
+  setToggleSearch: Dispatch<SetStateAction<boolean>>;
+  toggle_search: boolean;
+};
+
+const SearchButton = ({ setToggleSearch, toggle_search }: TSearchButton) => {
+  const location = useLocation();
+
+  const closeSearchHotkey = (event) => {
+    const press_escape = event.key === 'Escape';
+    const press_cmd_and_k = event.metaKey && event.key === 'k';
+
+    if (press_escape) setToggleSearch(false);
+    if (press_cmd_and_k) setToggleSearch(false);
+  };
+
+  const openSearchHotkey = (event) => {
+    const press_cmd_and_k = event.metaKey && event.key === 'k';
+    if (press_cmd_and_k) setToggleSearch(true);
+  };
+
+  const focusSearchInput = () => {
+    // Using vanilla JS to get the element since it's a 3rd party library. I cannot access through React.
+    const search_input = document.querySelector('.navbar__search-input');
+    if (search_input) {
+      const focusInput = () => (search_input as HTMLElement).focus();
+      focusInput();
+    }
+  };
+
+  useEffect(() => {
+    setToggleSearch(false);
+  }, [location]);
+
+  useEffect(() => {
+    if (toggle_search) {
+      focusSearchInput();
+      window.addEventListener('keydown', closeSearchHotkey);
+      return () => window.removeEventListener('keydown', closeSearchHotkey);
+    } else {
+      window.addEventListener('keydown', openSearchHotkey);
+      return () => window.removeEventListener('keydown', openSearchHotkey);
+    }
+  }, [toggle_search]);
+
+  return (
+    <React.Fragment>
+      <button
+        onClick={() => setToggleSearch((prev) => !prev)}
+        className={styles.searchButton}
+        data-testid='dt_search_button'
+      />
+      <div
+        className='search-overlay'
+        onClick={() => setToggleSearch(false)}
+        data-testid='dt_search_overlay'
+      />
+    </React.Fragment>
+  );
+};
+
+export default SearchButton;

src/components/UserNavbarItem/UserNavbarItem.module.scss

@@ -1,15 +1,5 @@
 @use 'src/styles/utility' as *;
 
-.searchButton {
-  width: rem(2.4);
-  height: rem(2.4);
-  background-image: url('/img/search-bold.svg');
-  background-repeat: no-repeat;
-  background-size: rem(1.6) rem(1.6);
-  background-position: center;
-  cursor: pointer;
-}
-
 .LogInButton {
   color: var(--colors-coral500);
   font-weight: bold;

src/components/UserNavbarItem/item.desktop.tsx

@@ -1,51 +1,13 @@
 import Link from '@docusaurus/Link';
 import clsx from 'clsx';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
 import AccountSwitcher from '../AccountSwitcher';
 import { IUserNavbarItemProps } from './item.types';
-import { useLocation } from '@docusaurus/router';
 import styles from './UserNavbarItem.module.scss';
+import SearchButton from '../SearchButton';
 
 const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => {
   const [toggle_search, setToggleSearch] = useState<boolean>(false);
-  const location = useLocation();
-
-  const closeSearchHotkey = (event) => {
-    const press_escape = event.key === 'Escape';
-    const press_cmd_and_k = event.metaKey && event.key === 'k';
-
-    if (press_escape) setToggleSearch(false);
-    if (press_cmd_and_k) setToggleSearch(false);
-  };
-
-  const openSearchHotkey = (event) => {
-    const press_cmd_and_k = event.metaKey && event.key === 'k';
-    if (press_cmd_and_k) setToggleSearch(true);
-  };
-
-  const focusSearchInput = () => {
-    // Using vanilla JS to get the element since it's a 3rd party library. I cannot access through React.
-    const search_input = document.querySelector('.navbar__search-input');
-    if (search_input) {
-      const focusInput = () => (search_input as HTMLElement).focus();
-      focusInput();
-    }
-  };
-
-  useEffect(() => {
-    setToggleSearch(false);
-  }, [location]);
-
-  useEffect(() => {
-    if (toggle_search) {
-      focusSearchInput();
-      window.addEventListener('keydown', closeSearchHotkey);
-      return () => window.removeEventListener('keydown', closeSearchHotkey);
-    } else {
-      window.addEventListener('keydown', openSearchHotkey);
-      return () => window.removeEventListener('keydown', openSearchHotkey);
-    }
-  }, [toggle_search]);
 
   const logInButtonClasses = clsx(
     'navbar__item navbar__link',
@@ -68,16 +30,7 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
       <Link to={'https://deriv.com/signup/'} className={signUpButtonClasses} target='_blank'>
         Sign up
       </Link>
-      <button
-        onClick={() => setToggleSearch((prev) => !prev)}
-        className={styles.searchButton}
-        data-testid='dt_search_button'
-      />
-      <div
-        className='search-overlay'
-        onClick={() => setToggleSearch(false)}
-        data-testid='dt_search_overlay'
-      />
+      <SearchButton setToggleSearch={setToggleSearch} toggle_search={toggle_search} />
     </nav>
   );
 };

src/styles/index.scss

@@ -191,20 +191,41 @@ div[class*='sidebarViewport'] {
         height: 100vh;
         background-color: rgba(0, 0, 0, 0.4);
         inset: 0;
+
+        @media (max-width: 768px) {
+          width: rem(2.5);
+          height: rem(2.5);
+          background-color: unset;
+          background-image: url('/img/close_dialog.svg');
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: rem(1.5);
+          inset: rem(1) rem(1) auto auto;
+          z-index: 1;
+        }
       }
       &+ div[class*='searchBox'] {
           position: fixed;
           min-width: rem(32);
           max-width: rem(79.2);
           max-height: rem(48);
-          top: rem(9);
+          top: 5%;
           width: 100%;
           height: 100%;
           border-radius: rem(1.6);
           left: 50%;
           transform: translateX(-50%);
           padding: 0;
           background-color: var(--ifm-color-white);
+          
+          @media (max-width: 768px) {
+            min-width: unset;
+            max-width: unset;
+            max-height: unset;
+            border-radius: unset;
+            top: 0;
+          }
+
           span[class*='searchBar'] {
             width: 100%;
             span[class*='dropdownMenu'] {
@@ -240,11 +261,16 @@ div[class*='sidebarViewport'] {
           }
         .navbar__search {
           margin: 0;
-          margin-top: rem(1.6);
+          margin-top: rem(2);
           display: flex;
           justify-content: center;
           text-align: center;
           width: 100%;
+
+          @media (max-width: 768px) {
+            margin-top: rem(4);
+          }
+
           button[class*='searchClearButton'] {
             right: rem(3);
           }