Refactor bottom and top bar

frontend/src/components/atoms/BottomBarItem/index.tsx

+import React from "react";
+import Button from "react-bootstrap/Button";
+import {
+  IconDefinition
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { NavLink } from "react-router-dom";
+
+export interface BottomBarItemProps {
+  page: {
+    name: string;
+    path: string;
+    icon: IconDefinition;
+  };
+}
+
+const BottomBarItem: React.FC<BottomBarItemProps> = ({ page }: BottomBarItemProps) => {
+
+  return (
+    <Button
+      activeClassName="active"
+      as={NavLink}
+      to={page.path}
+      id={"bottom-" + page.name}
+      key={page.name}
+    >
+      <div className="button-holder">
+        <FontAwesomeIcon icon={page.icon} size="lg" />
+      </div>
+    </Button>
+  );
+};
+
+export default BottomBarItem;

frontend/src/components/atoms/NavBarTabItem/index.tsx

+import React from "react";
+import Nav from "react-bootstrap/Nav";
+import { NavLink } from "react-router-dom";
+
+export interface NavBarItemProps {
+  page: {
+    name: string;
+    path: string;
+  };
+}
+
+const NavBarTabItem: React.FC<NavBarItemProps> = ({
+  page,
+}: NavBarItemProps) => {
+  return (
+    <Nav.Item key={page.name}>
+      <Nav.Link
+        as={NavLink}
+        activeClassName="active"
+        to={page.path}
+        className="page-button"
+      >
+        {page.name}
+      </Nav.Link>
+    </Nav.Item>
+  );
+};
+
+export default NavBarTabItem;

frontend/src/components/molecules/NavBarBrand/index.tsx

+import React from "react";
+import Navbar from "react-bootstrap/Navbar";
+import logo from "images/logo.svg";
+import { Link } from "react-router-dom";
+
+const NavBarBrand: React.FC = () => {
+
+  return (
+        <Navbar.Brand className="brand-container">
+          <img
+            src={logo}
+            width="30"
+            height="30"
+            className="d-inline-block align-center brand-image"
+            alt="React Bootstrap logo"
+            onClick={(e) => {
+							// TODO: change to using react states
+              e.preventDefault();
+              const wrapper = document.querySelector("#wrapper") || document.createElement("div");
+              if (wrapper.classList.contains("toggled")) {
+                wrapper.classList.remove("toggled");
+              } else {
+                wrapper.classList.add("toggled");
+              }
+            }}
+          />{" "}
+          <Link to="/" style={{ textDecoration: "none" }}>
+            Scientia
+          </Link>
+        </Navbar.Brand>
+  );
+};
+
+export default NavBarBrand;

frontend/src/components/molecules/NavBarTabGroup/index.tsx

+import React from "react";
+import Navbar from "react-bootstrap/Navbar";
+import Nav from "react-bootstrap/Nav";
+import NavBarTabItem from "components/atoms/NavBarTabItem";
+
+export interface NavBarTabGroupProps {
+  pages: {
+    name: string;
+    path: string;
+  }[];
+}
+
+const NavBarTabGroup: React.FC<NavBarTabGroupProps> = ({
+  pages,
+}: NavBarTabGroupProps) => {
+  return (
+    <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
+      <Nav variant="pills">
+        {pages.map((page) => (
+          <NavBarTabItem page={page} />
+        ))}
+      </Nav>
+    </Navbar>
+  );
+};
+
+export default NavBarTabGroup;

frontend/src/components/organisms/BottomBar/index.tsx

 import React from "react";
 import Navbar from "react-bootstrap/Navbar";
-import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import {
   IconDefinition
 } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { NavLink } from "react-router-dom";
+import BottomBarItem from "components/atoms/BottomBarItem"
 
 export interface BottomBarProps {
   pages: {
@@ -17,24 +15,11 @@ export interface BottomBarProps {
 }
 
 const BottomBar: React.FC<BottomBarProps> = ({ pages }: BottomBarProps) => {
-  const BottomBarItems = pages.map(({ name, path, icon }) => (
-    <Button
-      activeClassName="active"
-      as={NavLink}
-      to={path}
-      id={"bottom-" + name}
-      key={name}
-    >
-      <div className="button-holder">
-        <FontAwesomeIcon icon={icon} size="lg" />
-      </div>
-    </Button>
-  ));
 
   return (
     <Navbar className="bottom-bar footer">
       <ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
-        {BottomBarItems}
+        {pages.map((page => <BottomBarItem page={page}/>))}
       </ButtonGroup>
     </Navbar>
   );

frontend/src/components/organisms/TopBar/index.tsx

 import React from "react";
 import Container from "react-bootstrap/Container";
 import Navbar from "react-bootstrap/Navbar";
-import Nav from "react-bootstrap/Nav";
-import logo from "images/logo.svg";
 import userPic from "images/user.png";
-import { Link, NavLink } from "react-router-dom";
+import NavBarTabGroup from "components/molecules/NavBarTabGroup";
+import NavBarBrand from "components/molecules/NavBarBrand";
 
 export interface TopBarProps {
   pages: {
@@ -14,48 +13,14 @@ export interface TopBarProps {
 }
 
 const TopBar: React.FC<TopBarProps> = ({ pages }: TopBarProps) => {
-  const NavItems = pages.map(({ name, path }) => (
-    <Nav.Item key={name}>
-      <Nav.Link
-        as={NavLink}
-        activeClassName="active"
-        to={path}
-        className="page-button"
-      >
-        {name}
-      </Nav.Link>
-    </Nav.Item>
-  ));
 
   return (
     <Navbar className="top-bar" sticky="top" expand="lg" variant="light">
       <Container fluid>
-        <Navbar.Brand className="brand-container">
-          <img
-            src={logo}
-            width="30"
-            height="30"
-            className="d-inline-block align-center brand-image"
-            alt="React Bootstrap logo"
-            onClick={(e) => {
-							// TODO: change to using react states
-              e.preventDefault();
-              const wrapper = document.querySelector("#wrapper") || document.createElement("div");
-              if (wrapper.classList.contains("toggled")) {
-                wrapper.classList.remove("toggled");
-              } else {
-                wrapper.classList.add("toggled");
-              }
-            }}
-          />{" "}
-          <Link to="/" style={{ textDecoration: "none" }}>
-            Scientia
-          </Link>
-        </Navbar.Brand>
 
-        <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
-          <Nav variant="pills">{NavItems}</Nav>
-        </Navbar>
+        <NavBarBrand/>
+
+        <NavBarTabGroup pages={pages}/>
 
         <img
           src={userPic}

frontend/src/components/templates/ExamplePage.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import Jumbotron from "react-bootstrap/Jumbotron";
 import Container from "react-bootstrap/Container";
 
-import ButtonsShowcase from "components/molecules/Buttons";
-import ToastsShowcase from "components/molecules/Toasts";
+import ButtonsShowcase from "components/templates/ExampleButtons";
+import ToastsShowcase from "components/templates/ExampleToasts";
 
 export interface ExamplePageProps {
   name: string;