Add links to navbar

Dockerfile

@@ -0,0 +1,15 @@
+# pull official base image
+FROM node:13.12.0-alpine
+
+RUN mkdir -p /app
+WORKDIR /app
+EXPOSE 3001
+
+ENV PATH /app/node_modules/.bin:$PATH
+
+COPY . /app
+
+RUN npm install -y --silent
+RUN npm rebuild node-sass
+
+CMD ["npm", "start"]

src/App.js

@@ -13,6 +13,7 @@ import ProgressBar from 'react-bootstrap/ProgressBar';
 import Accordion from 'react-bootstrap/Accordion';
 import ToastContainer from 'react-bootstrap/ToastContainer'
 import Toast from 'react-bootstrap/Toast'
+import Nav from 'react-bootstrap/Nav'
 
 import { FaCheckCircle } from 'react-icons/fa';
 
@@ -20,7 +21,7 @@ import { FaCheckCircle } from 'react-icons/fa';
 const parse = require('csv-parse/lib/sync')
 const axios = require('axios');
 
-const dataSplitters = [0,135,250,388]
+const dataSplitters = [0,128,225,363]
 
 const BACKEND_URL = "https://projectdivar.com:4505"
 
@@ -107,6 +108,35 @@ function Notification(p) {
 </Toast>
 }
 
+function DarkInput(p){
+	const {props}=p;
+	return <input type="text" className="bg-dark text-white" {...p}></input>
+}
+
+function SorterApp(){
+	const [item1,setItem1] = useState("")
+	const [item2,setItem2] = useState("")
+	const [item3,setItem3] = useState("")
+	const [item4,setItem4] = useState("")
+	const [item5,setItem5] = useState("")
+	const [item6,setItem6] = useState("")
+
+	return <>
+	<Row className="text-white"><Col>Item 1:<DarkInput value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput></Col><Col><input type="text"></input></Col></Row>
+	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+	</>
+}
+
+function ListApp(){
+	return <>
+	<h1>List App!</h1>
+	</>
+}
+
 function App() {
 	
 	const [data,setData] = useState([])
@@ -125,6 +155,8 @@ function App() {
 	const [notifications,setNotifications] = useState([])
 	const [closedNotifications,setClosedNotifications] = useState([])
 
+	const [nav,setNav] = useState("main")
+
 	function LZ(digits,numb) {
 		return "0".repeat(digits-String(numb).length)+numb
 	}
@@ -278,7 +310,12 @@ function App() {
 				<Navbar.Brand href="#home">
 				  <img src={process.env.PUBLIC_URL+"/favicon.ico"} width="30" height="30" className="d-inline-block align-top" alt="BUN logo"/> BUN Collab App
 				</Navbar.Brand>
-				{contributor.length>0&&<span className="text-light font-weight-light font-italic">Signed in as {contributor}</span>}
+				{contributor.length>0&&<>
+				<Nav.Link style={(nav==="main")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("main")}}>Main</Nav.Link>
+				<Nav.Link style={(nav==="sort")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("sort")}}>Sort Check</Nav.Link>
+				<Nav.Link style={(nav==="list")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("list")}}>Grocery List</Nav.Link>
+				<span className="text-light font-weight-light font-italic">Signed in as {contributor}</span>
+				</>}
 			  </Container>
 		  </Navbar>
 			<Container>
@@ -286,6 +323,7 @@ function App() {
 							<input placeHolder="e.g. Bun" onKeyDown={(k)=>{if (k.key==='Enter') {setContributor(document.getElementById("username").value)}}} id="username"/>
 							<button type="Submit" onClick={(f)=>{setContributor(document.getElementById("username").value)}}>Submit</button>
 						</>:
+						nav==="main"?
 							data.length>0?
 							<>
 								<Accordion className="bg-dark" defaultActiveKey="0">
@@ -315,7 +353,10 @@ function App() {
 								}
 								</Col>
 							</Row>
-						
+						:
+						nav==="sort"?<SorterApp></SorterApp>:
+						nav==="list"?<ListApp></ListApp>:
+						<></>
 					}
 		<div style={{pointerEvents:"none",position:"fixed",top:"0px",left:"0px",width:"100%",height:"100%"}}>
 			<ToastContainer position="bottom-end">