PR adjustment to disable search element and sidebar navigation menu.

Author: swoocn

src/app/global.css

@@ -7,6 +7,7 @@
 :root {
   --default-primary-color: #386F4F;
   --default-secondary-color: #F6C367;
+  --default-tertiary-color: #808080;
   --default-bg-color: #EBF1ED;
 }
 

src/components/shared/SearchBar/SearchBar.tsx

@@ -3,12 +3,13 @@
 import './SearchBar.scss';
 
 import { useTranslations } from 'next-intl';
-import { useState, useRef, ChangeEvent, FormEvent } from 'react';
+import { useContext, useState, useRef, ChangeEvent, FormEvent } from 'react';
 import { FormControl, TextField } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { fetchSellers } from '@/services/sellerApi';
 
 import logger from '../../../../logger.config.mjs';
+import { AppContext } from '../../../../context/AppContextProvider';
 
 interface searchBarProps {
   onSearch?: (query: string, results: any[]) => void;
@@ -21,6 +22,8 @@ const SearchBar: React.FC<searchBarProps> = ({ onSearch, page }) => {
   const [searchBarValue, setSearchBarValue] = useState('');
   const [loading, setLoading] = useState(false);
 
+  const { isSigningInUser } = useContext(AppContext);
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const getPlaceholderText = (page: 'map_center' | 'default'): string => {
@@ -70,17 +73,20 @@ const SearchBar: React.FC<searchBarProps> = ({ onSearch, page }) => {
               type="text"
               variant="outlined"
               color="success"
-              className="bg-white hover:bg-gray-100 w-full rounded"
-              label={placeholder}
+              className={`w-full rounded ${isSigningInUser ? 'bg-gray-200' : 'bg-white hover:bg-gray-100'}`}
+              label={`${isSigningInUser ? '' : placeholder}`}
               value={searchBarValue}
               onChange={handleSearchBarChange}
               ref={inputRef}
+              disabled={isSigningInUser}
             />
           </FormControl>
           <button
             aria-label="search"
             type="submit"
-            className="bg-primary rounded h-full w-15 p-[15.5px] flex items-center justify-center hover:bg-gray-600"
+            className={`rounded h-full w-15 p-[15.5px] flex items-center justify-center 
+              ${isSigningInUser ? 'bg-tertiary' : 'bg-primary hover:bg-gray-500'}`}
+            disabled={isSigningInUser}
           >
             <SearchIcon className="text-[#ffc153]" />
           </button>

src/components/shared/navbar/Navbar.tsx

@@ -54,27 +54,41 @@ function Navbar() {
           className="flex justify-between">
           <div className={`${styles.nav_item} ${checkHomePage && 'disabled'}`}>
             <Link href="/" onClick={handleBackBtn}>
-              <IoMdArrowBack size={26} className={`${checkHomePage ? 'grey' : 'text-secondary'}`} />
+              <IoMdArrowBack size={26} className={`${checkHomePage ? 'text-tertiary' : 'text-secondary'}`} />
             </Link>
           </div>
 
             <div className={`${styles.nav_item} ${checkHomePage && 'disabled'}`}>
               <Link href="/">
-                <MdHome size={24} className={`${checkHomePage ? 'grey' : 'text-secondary'}`} />
+                <MdHome size={24} className={`${checkHomePage ? 'text-tertiary' : 'text-secondary'}`} />
               </Link>
             </div>
           <div className={`${styles.nav_item}`}>
-            <Link href="" onClick={handleMenu}>
-              {sidebarToggle ? (
-                <IoMdClose size={24} className="text-secondary" />
-              ) : (
-                <FiMenu size={24} className="text-secondary" />
-              )}
-            </Link>
+          <Link
+            href=""
+            onClick={(e) => {
+              if (isSigningInUser) {
+                e.preventDefault();
+              } else {
+                handleMenu();
+              }
+            }}
+          >
+            {sidebarToggle && !isSigningInUser ? (
+              <IoMdClose size={24} className="text-secondary" />
+            ) : (
+              <FiMenu
+                size={24}
+                className={`${
+                  isSigningInUser ? 'text-tertiary cursor-not-allowed' : 'text-secondary'
+                }`}
+              />
+            )}
+          </Link>
           </div>
         </div>
       </div>
-      {sidebarToggle && (
+      {sidebarToggle && !isSigningInUser && (
         <Sidebar toggle={sidebarToggle} setToggleDis={setSidebarToggle} />
       )}
     </>

tailwind.config.ts

@@ -11,6 +11,7 @@ const config: Config = {
       colors: {
         primary: 'var(--default-primary-color)',
         secondary: 'var(--default-secondary-color)',
+        tertiary: 'var(--default-tertiary-color)',
         background: 'var(--default-bg-color)'  
       },
       height: {