added '/' as search shortcut

components/Searchbar/Searchbar.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, Ref } from 'react'
 
 import SearchIcon from 'assets/icons/SearchIcon'
 import { SearchbarSuggestions } from './SearchbarSuggestions'
@@ -14,6 +14,7 @@ interface SearchbarProps {
   searchQuery: string
   showSuggestions: boolean
   searchQueryIsValid: boolean
+  inputRef : Ref<HTMLInputElement>
 }
 
 const searchOptions = subcategoryArray
@@ -24,6 +25,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
   searchQuery,
   showSuggestions,
   searchQueryIsValid,
+  inputRef,
 }) => {
   const formRef = useRef<HTMLFormElement>(null)
   const router = useRouter()
@@ -88,6 +90,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
             Quick search
           </label>
           <input
+          ref={inputRef}
             type="text"
             id="simple-search"
             name="simple-search"

components/SideNavbar/SideNavbarBody.tsx

@@ -1,17 +1,17 @@
-import { FC, memo } from 'react'
+import { FC, memo, useRef } from 'react'
 import { Searchbar } from 'components/Searchbar/Searchbar'
 import classNames from 'classnames'
 import { useTheme } from 'next-themes'
-
 import { SideNavbarCategoryList } from './SideNavbarCategoryList'
-
 import { useSearchReducer } from 'hooks/useSearchReducer'
-
+import useSearchShortcut from 'hooks/useSearchShortcut'
 const MemoizedSideNavbarCategoryList = memo(SideNavbarCategoryList)
 
 export const SideNavbarBody: FC = () => {
   const { theme } = useTheme()
   const [searchState, dispatchSearch] = useSearchReducer()
+  const inputRef : React.RefObject<HTMLInputElement> = useRef(null);
+  useSearchShortcut({inputRef})
 
   return (
     <div
@@ -21,7 +21,7 @@ export const SideNavbarBody: FC = () => {
       )}
     >
       <div className="bg-primary-light transiton-all w-full p-4 transition-none ease-in dark:bg-dark">
-        <Searchbar {...searchState} dispatchSearch={dispatchSearch} />
+        <Searchbar inputRef={inputRef} {...searchState} dispatchSearch={dispatchSearch} />
       </div>
       <MemoizedSideNavbarCategoryList query={searchState.categoryQuery} />
     </div>

hooks/useSearchShortcut.tsx

@@ -0,0 +1,32 @@
+import  { useEffect, Ref, RefObject } from "react";
+
+interface useSearchShortcutProps  {
+    inputRef : RefObject<HTMLInputElement | null>,
+}
+
+const useSearchShortcut = ({inputRef} : useSearchShortcutProps) => {
+    useEffect(() => {
+        const handleSlashKeyPress = (event: KeyboardEvent) => {
+          // Check if the pressed key is '/'
+          if (event.key === '/') {
+            // Prevent the default behavior (e.g., adding '/' to an input field)
+            event.preventDefault();
+
+            // Focus the input element
+            if (inputRef.current) {
+              inputRef.current.focus();
+            }
+          }
+        };
+
+        // Attach the event listener when the component mounts
+        document.addEventListener('keydown', handleSlashKeyPress);
+
+        // Detach the event listener when the component unmounts
+        return () => {
+          document.removeEventListener('keydown', handleSlashKeyPress);
+        };
+      }, [inputRef]);
+}
+
+export default useSearchShortcut