From 22cd5c8b9352d81f03b1487f8fddf98029fbeb72 Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Mon, 16 May 2022 13:54:08 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20search=20bar=20in=20top=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Header.tsx | 27 ++++++++-------------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 44185e28e..2f3573872 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
-import { createStyles, Header as Head, Group, Drawer, Center } from '@mantine/core';
-import { useBooleanToggle } from '@mantine/hooks';
+import {
+  createStyles,
+  Header as Head,
+  Group,
+} from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { Logo } from './Logo';
-import CalendarComponent from '../modules/calendar/CalendarModule';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
+import SearchBar from '../SearchBar/SearchBar';
 
 const HEADER_HEIGHT = 60;
 
@@ -83,8 +86,7 @@ interface HeaderResponsiveProps {
   links: { link: string; label: string }[];
 }
 
-export function Header({ links }: HeaderResponsiveProps) {
-  const [opened, toggleOpened] = useBooleanToggle(false);
+export function Header(props: any) {
   const { classes, cx } = useStyles();
 
   return (
@@ -94,24 +96,11 @@ export function Header({ links }: HeaderResponsiveProps) {
           <Logo style={{ fontSize: 22 }} />
         </NextLink>
         <Group>
+          <SearchBar />
           <SettingsMenuButton />
           <AddItemShelfButton />
         </Group>
       </Group>
-
-      <Drawer
-        opened={opened}
-        overlayOpacity={0.55}
-        overlayBlur={3}
-        onClose={() => toggleOpened()}
-        position="right"
-      >
-        {opened ?? (
-          <Center>
-            <CalendarComponent />
-          </Center>
-        )}
-      </Drawer>
     </Head>
   );
 }