appshell complete need to figure out react-router with the sidebar

frontend/src/components/AppHeader.js

@@ -0,0 +1,35 @@
+import React, {useState } from 'react';
+import { Header, MediaQuery, Burger, Text, ThemeIcon, Group, Title } from '@mantine/core';
+import { useMantineTheme } from '@mantine/core';
+import { BsHouseDoor } from 'react-icons/bs'
+
+
+function AppHeader(props) {
+  const theme = useMantineTheme();
+
+  return (
+      <Header height={70} padding="md">
+      {/* You can handle other responsive styles with MediaQuery component or createStyles function */}
+      <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+          <Burger
+            opened={props.opened}
+            onClick={() => props.setOpened((o) => !o)}
+            size="sm"
+            color={theme.colors.gray[6]}
+            mr="xl"
+          />
+        </MediaQuery>
+        <Group>
+          <ThemeIcon size="xl"><BsHouseDoor /></ThemeIcon>
+          <Title><Text inherit variant="gradient" gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}>goInventorize</Text></Title>
+        </Group>
+
+      </div>
+    </Header>
+  )
+}
+
+  
+
+export default AppHeader