Implement material ui navbar

4 years ago · 7224d80338
parent a8d79a0161
commit 7224d80338
5 changed files with 286 additions and 31 deletions
--- a/family-tracker/package-lock.json
+++ b/family-tracker/package-lock.json
@ -1115,6 +1115,11 @@
      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
      "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
    "@hapi/address": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -1340,6 +1345,82 @@
        "@types/yargs": "^13.0.0"
      }
    },
+    "@material-ui/core": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz",
+      "integrity": "sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.10.0",
+        "@material-ui/system": "^4.9.14",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.10.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
+      "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.9.14",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz",
+      "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+      "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
    "@mrmlnc/readdir-enhanced": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -1723,6 +1804,14 @@
        "@types/react": "*"
      }
    },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/stack-utils": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@ -3557,6 +3646,11 @@
        "shallow-clone": "^0.1.2"
      }
    },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
    "co": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@ -4061,6 +4155,15 @@
        }
      }
    },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
    "css-what": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
@ -4520,6 +4623,15 @@
        "utila": "~0.4"
      }
    },
+    "dom-helpers": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      }
+    },
    "dom-serializer": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@ -6522,6 +6634,11 @@
      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
    },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -6890,6 +7007,11 @@
        "is-extglob": "^2.1.1"
      }
    },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
    "is-number": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@ -7743,6 +7865,84 @@
        "verror": "1.10.0"
      }
    },
+    "jss": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.3.0.tgz",
+      "integrity": "sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.3.0.tgz",
+      "integrity": "sha512-tadWRi/SLWqLK3EUZEdDNJL71F3ST93Zrl9JYMjV0QDqKPAl0Liue81q7m/nFUpnSTXczbKDy4wq8rI8o7WFqA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "^10.3.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.3.0.tgz",
+      "integrity": "sha512-tT5KkIXAsZOSS9WDSe8m8lEHIjoEOj4Pr0WrG0WZZsMXZ1mVLFCSsD2jdWarQWDaRNyMj/I4d7czRRObhOxSuw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.3.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.3.0.tgz",
+      "integrity": "sha512-etYTG/y3qIR/vxZnKY+J3wXwObyBDNhBiB3l/EW9/pE3WHE//BZdK8LFvQcrCO48sZW1Z6paHo6klxUPP7WbzA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.3.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.3.0.tgz",
+      "integrity": "sha512-qWiEkoXNEkkZ+FZrWmUGpf+zBsnEOmKXhkjNX85/ZfWhH9dfGxUCKuJFuOWFM+rjQfxV4csfesq4hY0jk8Qt0w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.3.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.3.0.tgz",
+      "integrity": "sha512-boetORqL/lfd7BWeFD3K+IyPqyIC+l3CRrdZr+NPq7Noqp+xyg/0MR7QisgzpxCEulk+j2CRcEUoZsvgPC4nTg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.3.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.3.0.tgz",
+      "integrity": "sha512-7WiMrKIHH3rwxTuJki9+7nY11r1UXqaUZRhHvqTD4/ZE+SVhvtD5Tx21ivNxotwUSleucA/8boX+NF21oXzr5Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.3.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.3.0.tgz",
+      "integrity": "sha512-sZQbrcZyP5V0ADjCLwUA1spVWoaZvM7XZ+2fSeieZFBj31cRsnV7X70FFDerMHeiHAXKWzYek+67nMDjhrZAVQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "^10.3.0"
+      }
+    },
    "jsx-ast-utils": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
@ -9185,6 +9385,11 @@
        "ts-pnp": "^1.1.6"
      }
    },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
    "portfinder": {
      "version": "1.0.27",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.27.tgz",
@ -10731,6 +10936,17 @@
        "workbox-webpack-plugin": "4.3.1"
      }
    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
    "read-pkg": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
--- a/family-tracker/package.json
+++ b/family-tracker/package.json
@ -3,6 +3,8 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
--- a/family-tracker/public/index.html
+++ b/family-tracker/public/index.html
@ -10,6 +10,9 @@
      content="Family Tracker"
    />
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
--- a/family-tracker/src/App.css
+++ b/family-tracker/src/App.css
@ -1,3 +1,14 @@
+body{
+	font-family:Roboto
+}
+
+.navibar{
+	position: -webkit-sticky; /* this is for all Safari (Desktop & iOS), not for Chrome*/
+    position: sticky;
+    top: 0;
+    z-index: 100000;
+}
+
 .mouseover:hover{
 	background-color:#eee;
 }
--- a/family-tracker/src/App.js
+++ b/family-tracker/src/App.js
@ -1,6 +1,17 @@
 import React, {useState,useEffect} from 'react';
 import logo from './logo.svg';
 import './App.css';
+import AppBar from '@material-ui/core/AppBar';
+import MuiAppBar from '@material-ui/core/AppBar';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { Container } from '@material-ui/core';
+import MuiBottomNavigation from '@material-ui/core/BottomNavigation';
+import MuiBottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import MuiGroupAddTwoToneIcon from '@material-ui/icons/GroupAddTwoTone';
+import FavoriteTwoToneIcon from '@material-ui/icons/FavoriteTwoTone';
+import AnnouncementTwoToneIcon from '@material-ui/icons/AnnouncementTwoTone';
+import RoomTwoToneIcon from '@material-ui/icons/RoomTwoTone';
 import {
  BrowserRouter as Router,
  Switch,
@ -245,9 +256,9 @@ function Member(p) {
 				</div>
 			</div>
 			<div className="row">
-				<div className="col-sm-12 col-lg-8">
+				<div className="col-12">
 					<label htmlFor="name">Add Member:</label>
-					<br/><div className="form-group"><label for="firstName">First Name</label><input type="text" className="form-control form-control-sm" name="firstName" disabled={disabled} onChange={(e)=>{setFirstName(e.target.value);}} value={firstName} id="firstName"/></div><div className="form-group"><label for="lastName">Last Name</label><input type="text" className="form-control form-control-sm" name="lastName" disabled={disabled} onChange={(e)=>{setLastName(e.target.value);}} value={lastName} id="lastName"/></div><div className="form-group"><label for="mobileDevice">Mobile Device</label><input type="text" name="mobileDevice" className="form-control form-control-sm" disabled={disabled} onChange={(e)=>{setMobileDevice(e.target.value);}} value={mobileDevice} id="mobileDevice"/></div><div className="form-group"><label for="relationship">Relationship</label><select className="form-control form-control-sm" name="relationship" disabled={disabled} onChange={(e)=>{setRelationship(e.target.value);}} id="relationship" value={relationship}>
+					<br/><div className="form-group"><label htmlFor="firstName">First Name</label><input type="text" className="form-control form-control-sm" name="firstName" disabled={disabled} onChange={(e)=>{setFirstName(e.target.value);}} value={firstName} id="firstName"/></div><div className="form-group"><label htmlFor="lastName">Last Name</label><input type="text" className="form-control form-control-sm" name="lastName" disabled={disabled} onChange={(e)=>{setLastName(e.target.value);}} value={lastName} id="lastName"/></div><div className="form-group"><label htmlFor="mobileDevice">Mobile Device</label><input type="text" name="mobileDevice" className="form-control form-control-sm" disabled={disabled} onChange={(e)=>{setMobileDevice(e.target.value);}} value={mobileDevice} id="mobileDevice"/></div><div className="form-group"><label htmlFor="relationship">Relationship</label><select className="form-control form-control-sm" name="relationship" disabled={disabled} onChange={(e)=>{setRelationship(e.target.value);}} id="relationship" value={relationship}>
 						{options.map((option)=><option value={option.value} key={option.value}>{option.display}</option>)}
 					</select></div><button disabled={disabled} style={{width:"10%"}} onClick={()=>{
 						setDisabled(true)
@ -330,10 +341,10 @@ function Fam(p) {
 			<div className="col-1 border-left border-top border-bottom">
 				{p.family.id}
 			</div>
-			<div className="col-1 border-top border-bottom">
+			<div className="col-2 border-top border-bottom">
 				<Editable update={p.update} setUpdate={p.setUpdate} endpoint={"http://localhost:8080/family/"+p.family.id} field="name" value={p.family.name}/>
 			</div>
-			<div className="col-sm-12 col-lg-6 mr-3 border-left border-top border-bottom border-right">
+			<div className="col-9 border-left border-top border-bottom border-right">
 				{p.family.members.map((member)=><Mem key={member.id} member={member} update={p.update} setUpdate={p.setUpdate}/>)}
 			</div>
 		</div>
@ -353,7 +364,7 @@ function Family(p) {
 		{p.family.map((family)=><Fam key={family.id} family={family} update={p.update} setUpdate={p.setUpdate}/>)}
 		<br/>
 		<div className="row">
-			<div className="col-sm-12 col-lg-8">
+			<div className="col-12">
 				<label htmlFor="name">Add Family Name:</label>
 				<br/><input type="text" onChange={(e)=>{setFamily(e.target.value);}} value={family} id="name" style={{width:"90%"}}/><button style={{width:"10%"}} onClick={()=>{
 					axios.post("http://localhost:8080/family",{name:family})
@ -378,11 +389,18 @@ function L(p) {
 	)
 }

+const darkTheme = createMuiTheme({
+    palette: {
+      type: 'dark',
+    },
+});
+
 function App() {
 	const [pageView,setPageView] = useState(null);
 	const [active,setActive] = useState("/");
 	const [family,setFamily] = useState([]);
 	const [update,setUpdate] = useState(false);
+	const [value,setValue] = useState("Family")
 	
 	useEffect(()=>{
 		axios.get("http://localhost:8080/family")
@ -390,34 +408,39 @@ function App() {
 	},[update])
 	
 	  return (
-		<Router>
-			<div className="container-fluid">
-				<div className="row">
-					<div className="col-sm-3 text-center pt-5 order-2 order-sm-2 order-md-1">
-						<Link to="/" onClick={()=>{setActive("/")}}><L highlight="/" active={active} name="Family"/></Link>
-						<Link to="/members" onClick={()=>{setActive("/members")}}><L highlight="/members" active={active} name="Members"/></Link>
-						<Link to="/messages" onClick={()=>{setActive("/messages")}}><L highlight="/messages" active={active} name="Notifications"/></Link>
-						<Link to="/map" onClick={()=>{setActive("/map")}}><L highlight="/map" active={active} name="Map"/></Link>
-					</div>
-					<div className="col-sm-9 order-1 order-sm-1 order-md-2">
-						<Switch>
-							<Route path="/map">
-								<Map setActive={setActive} family={family}/>
-							</Route>
-							<Route path="/messages">
-								<Message setActive={setActive} family={family}/>
-							</Route>
-							<Route path="/members">
-								<Member setActive={setActive} family={family} update={update} setUpdate={setUpdate}/>
-							</Route>
-							<Route path="/">
-								<Family setActive={setActive} family={family} update={update} setUpdate={setUpdate}/>
-							</Route>
-						</Switch>
+	  <ThemeProvider theme={darkTheme}>
+			<Router>
+				<MuiBottomNavigation value={value} showLabels className="navibar">
+							<Link to="/" onClick={()=>{setActive("/")}}>
+							<MuiBottomNavigationAction label="Family" value="Family" icon={<MuiGroupAddTwoToneIcon />} /></Link>
+							<Link to="/members" onClick={()=>{setActive("/members")}}><MuiBottomNavigationAction label="Members" value="Members" icon={<FavoriteTwoToneIcon />} /></Link>
+							<Link to="/messages" onClick={()=>{setActive("/messages")}}><MuiBottomNavigationAction label="Notifications" value="Notifications" icon={<AnnouncementTwoToneIcon />} /></Link>
+							<Link to="/map" onClick={()=>{setActive("/map")}}><MuiBottomNavigationAction label="Map" value="Map" icon={<RoomTwoToneIcon />} /></Link>
+							</MuiBottomNavigation>
+		<Container maxWidth="md">
+				<div className="container">
+					<div className="row">
+						<div className="col-12 order-1 order-sm-1 order-md-2">
+							<Switch>
+								<Route path="/map">
+									<Map setActive={setActive} family={family}/>
+								</Route>
+								<Route path="/messages">
+									<Message setActive={setActive} family={family}/>
+								</Route>
+								<Route path="/members">
+									<Member setActive={setActive} family={family} update={update} setUpdate={setUpdate}/>
+								</Route>
+								<Route path="/">
+									<Family setActive={setActive} family={family} update={update} setUpdate={setUpdate}/>
+								</Route>
+							</Switch>
+						</div>
 					</div>
 				</div>
-			</div>
-		</Router>
+			</Container>
+			</Router>
+		</ThemeProvider>
 	  );
 }