Added search bar

client/src/components/Home/Home.tsx

@@ -22,6 +22,7 @@ import classes from './Home.module.css';
 import AppGrid from '../Apps/AppGrid/AppGrid';
 import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
 import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
+import SearchBox from '../SearchBox/SearchBox';
 
 // Functions
 import { greeter } from './functions/greeter';
@@ -87,6 +88,11 @@ const Home = (props: ComponentProps): JSX.Element => {
   
   return (
     <Container>
+      {searchConfig('hideSearch', 0) !== 1
+        ? <SearchBox />
+        : <div></div>
+      }
+
       {searchConfig('hideHeader', 0) !== 1
         ? (
           <header className={classes.Header}>

client/src/components/SearchBox/SearchBox.module.css

@@ -0,0 +1,17 @@
+.SearchBox {
+  width: 100%;
+  padding: 10px 0;
+  color: var(--color-primary);
+  /* font-size: 20px; */
+  margin-bottom: 20px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid var(--color-accent);
+  opacity: 0.5;
+  transition: all 0.2s;
+}
+
+.SearchBox:focus {
+  opacity: 1;
+  outline: none;
+}

client/src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,29 @@
+import { useRef, useEffect, KeyboardEvent } from 'react';
+
+import classes from './SearchBox.module.css';
+import { searchParser } from '../../utility';
+
+const SearchBox = (): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [])
+
+  const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === 'Enter') {
+      searchParser(inputRef.current.value);
+    }
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type='text'
+      className={classes.SearchBox}
+      onKeyDown={(e) => searchHandler(e)}
+    />
+  )
+}
+
+export default SearchBox;

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -34,6 +34,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     hideHeader: 0,
     hideApps: 0,
     hideCategories: 0,
+    hideSearch: 0,
     useOrdering: 'createdAt',
     openSameTab: 0
   })
@@ -47,6 +48,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
       hideHeader: searchConfig('hideHeader', 0),
       hideApps: searchConfig('hideApps', 0),
       hideCategories: searchConfig('hideCategories', 0),
+      hideSearch: searchConfig('hideSearch', 0),
       useOrdering: searchConfig('useOrdering', 'createdAt'),
       openSameTab: searchConfig('openSameTab', 0)
     })
@@ -151,6 +153,18 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
       {/* MODULES OPTIONS */}
       <h2 className={classes.SettingsSection}>Modules</h2>
+      <InputGroup>
+        <label htmlFor='hideSearch'>Hide search bar</label>
+        <select
+          id='hideSearch'
+          name='hideSearch'
+          value={formData.hideSearch}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
       <InputGroup>
         <label htmlFor='hideHeader'>Hide greeting and date</label>
         <select