added footer

client/package-lock.json

@@ -16,6 +16,7 @@
         "nth-check": ">=2.0.1",
         "react": "^18.2.0",
         "react-bootstrap": "^2.4.0",
+        "react-bootstrap-icons": "^1.8.4",
         "react-dom": "^18.2.0",
         "react-router": "^6.3.0",
         "react-router-dom": "^6.3.0",
@@ -13820,6 +13821,17 @@
         }
       }
     },
+    "node_modules/react-bootstrap-icons": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.8.4.tgz",
+      "integrity": "sha512-PTCQqTLn0AdCy622reNmV+b4PwCPIOA0PFYT3CSfiqw5nwDPGntOm3Pr+ZsMxXD655QAs1nrMm7u0t3+HVxhtQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -26518,6 +26530,14 @@
         "warning": "^4.0.3"
       }
     },
+    "react-bootstrap-icons": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.8.4.tgz",
+      "integrity": "sha512-PTCQqTLn0AdCy622reNmV+b4PwCPIOA0PFYT3CSfiqw5nwDPGntOm3Pr+ZsMxXD655QAs1nrMm7u0t3+HVxhtQ==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

client/package.json

@@ -7,14 +7,15 @@
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.1.3",
     "http-proxy-middleware": "^2.0.6",
+    "nth-check": ">=2.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
+    "react-bootstrap-icons": "^1.8.4",
     "react-dom": "^18.2.0",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4",
-    "nth-check": ">=2.0.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "set HTTPS=true&&react-scripts start",

client/src/App.js

@@ -6,15 +6,17 @@ import './styles/app.css';
 import NavBar from './components/navbar';
 import Home from './pages/home';
 import About from './pages/about';
+import Footer from './components/footer';
 
 export default function App() {
     return (
-        <div>
+        <div className='d-flex flex-column min-vh-100'>
             <NavBar/>
             <Routes>
                 <Route path='/' element={<Home/>}/>
                 <Route path='/About' element={<About/>}/>
             </Routes>
+            <Footer/>
         </div>
     );
 }

client/src/components/footer.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Github } from 'react-bootstrap-icons';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+export default function Footer() {
+    return (
+        <footer className='mt-auto py-3'>
+            <Container>
+
+                <hr/>
+            
+                <Row>
+
+                    <Col className='text-start'>
+                        <span>
+                            <span className='highlight'>criminal</span>mindsapi &#169; 2022
+                        </span>
+                    </Col>
+
+                    <Col className='text-end'>
+                        <a
+                            className='text-dark'
+                            href='https://github.com/StevanFreeborn/criminalmindsapi'
+                            target='_blank'
+                            rel="noreferrer"
+                        >
+                            <Github size={25} />
+                        </a>
+                    </Col>
+
+                </Row>
+
+            </Container>
+        </footer>
+    )
+}

client/src/components/navbar.js

@@ -11,13 +11,18 @@ export default function NavBar() {
             expand='sm'
             variant='light'
         >
-            <Container fluid>
+            <Container fluid className='mt-2'>
 
                 <Navbar.Brand
                     href='/'
-                    className='pt-0'
+                    className='p-0 my-auto'
                 >
-                    <span className='highlight'>criminal</span>mindsapi
+                    <img 
+                        src='/favicon.svg'
+                        alt='logo'
+                        width='60'
+                        height='100%'
+                    />
                 </Navbar.Brand>
 
                 <Navbar.Toggle aria-controls='basic-navbar-nav'/>