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

frontend/package.json

@@ -3,22 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@mantine/core": "^2.1.3",
-    "@mantine/dates": "^2.1.3",
-    "@mantine/hooks": "^2.1.3",
-    "@mantine/notifications": "^2.1.3",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@mantine/core": "^3.1.9",
+    "@mantine/dates": "^3.1.9",
+    "@mantine/dropzone": "^3.1.9",
+    "@mantine/hooks": "^3.1.9",
+    "@mantine/notifications": "^3.1.9",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "base-64": "^1.0.0",
-    "dayjs": "^1.10.6",
-    "ky": "^0.28.5",
+    "dayjs": "^1.10.7",
+    "ky": "^0.28.7",
+    "npm-check-updates": "^12.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-jss": "^10.7.1",
-    "react-router-dom": "^5.2.0",
+    "react-icons": "^4.3.1",
+    "react-jss": "^10.8.2",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/App.js

@@ -1,11 +1,12 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
 import base64 from 'base-64';
-import Home from './components/pages/Home'
-import { Modal, Button, Text, Group, TextInput, Loader } from '@mantine/core';
+import Home from './components/pages/Home';
+import { Modal, Button, Text, Group, TextInput, Loader, AppShell } from '@mantine/core';
 import { useDebouncedValue, useLocalStorageValue } from '@mantine/hooks';
 
-import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
 
+import SideBar from './components/SideBar';
+import AppHeader from './components/AppHeader';
 
 
 const defaultSettings = {"serverURL": window.location.href.slice(0, -1), "Timezone": "America/Detroit"}
@@ -14,6 +15,8 @@ const defaultSettings = {"serverURL": window.location.href.slice(0, -1), "Timezo
 const APIContext = createContext();
 
 function App() {
+  // Main nav/sidebar appshell openend
+  const [shellOpened, setShellOpened] = useState(false)
   const [portModalOpen, setPortModalOpen] = useState(false)
   const [authModalOpen, setAuthModalOpen] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
@@ -77,8 +80,17 @@ function App() {
     }
   }, [serverConfig])
 
+
   return (
     <APIContext.Provider value={{...serverConfig}}>
+      <AppShell
+          navbarOffsetBreakpoint="sm" // navbarOffsetBreakpoint controls when navbar should no longer be offset with padding-left
+          fixed       // fixed prop on AppShell will be automatically added to Header and Navbar
+          navbar={<SideBar opened={shellOpened}/>}
+          header={<AppHeader opened={shellOpened} setOpened={setShellOpened}/>}
+        >
+          <Text>Resize app to see responsive navbar in action</Text>
+      </AppShell>
      <Modal
         opened={portModalOpen}
         onClose={() => setPortModalOpen(false)}
@@ -87,23 +99,14 @@ function App() {
         <Text>Guessed Server URL: {serverConfig["serverURL"]} does not appear to be correct, please enter correct url.</Text>
         <TextInput label="Server URL" value={serverConfig["serverURL"]} onChange={(e) => setServerConfig({...serverConfig, "serverURL": e.currentTarget.value})} required></TextInput>
       </Modal>
-      <Modal
-        opened={authModalOpen}
-        onClose={() => setAuthModalOpen(false)}
-        title="Please Login!"
-      >
+      <Modal opened={authModalOpen} onClose={() => setAuthModalOpen(false)} title="Please Login!">
         <TextInput label="UserName" value={serverConfig["serverURL"]} onChange={(e) => setServerConfig({"ServerURL": e.currentTarget.value})} required></TextInput>
         <TextInput label="UserName" type="password" value={serverConfig["serverURL"]} onChange={(e) => setServerConfig({"ServerURL": e.currentTarget.value})} required></TextInput>
       </Modal>
       {isLoading ? <Group position="center"><Loader size="xl"></Loader></Group> : <div>Welcome to goInventorize!</div>}
-    <Router>
-      <Switch path="/">
-        <Home />
-      
-      </Switch>
-    </Router>
-    
-    
+   
+
+
     </APIContext.Provider>
     
   );

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

frontend/src/components/SideBar.js

@@ -0,0 +1,35 @@
+import React, {useState } from 'react';
+import { Navbar, Text, Group, ThemeIcon, Button } from '@mantine/core';
+import { BsMap } from 'react-icons/bs'
+import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
+
+
+
+function SideBar(props) {
+
+
+    return (
+        <Navbar
+            padding="md"
+            // Breakpoint at which navbar will be hidden if hidden prop is true
+            hiddenBreakpoint="sm"
+            // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
+            hidden={!props.opened}
+            width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
+        >
+            <Router>
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                </Routes>
+            <Button component={Link} to="/locations" leftIcon={<ThemeIcon><BsMap /></ThemeIcon>}>
+                <Text>Locations</Text>
+            </Button>
+            </Router>
+           
+        </Navbar>
+    )
+}
+
+  
+
+export default SideBar

frontend/src/components/pages/Home.js

@@ -1,22 +1,20 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
 import APIContext from '../../App';
-import { Modal, Button, Text, Group, TextInput, Loader } from '@mantine/core';
 
 
 
 
 function App() {
+    const [opened, setOpened] = useState(false);
 
-    
     const serverConfig = useContext(APIContext);
 
 
     return (
         <>
-            This page is the home page!
         </>
 
-);
-    }
+    );
+}
 
 export default App;

frontend/src/index.js

@@ -8,7 +8,7 @@ const backendPort = process.env.REACT_APP_BACKEND_PORT
 console.log("BACKEND PORT: ", backendPort)
 
 ReactDOM.render(
-  <React.StrictMode>
+  <React.StrictMode>    
     <App />
   </React.StrictMode>,
   document.getElementById('root')