From 486e2d84ff754080d8c8e10c83a7466812064dd8 Mon Sep 17 00:00:00 2001
From: Chase Sydow <chase.sydow@gmail.com>
Date: Wed, 12 Oct 2022 17:56:08 -0500
Subject: [PATCH] - Removed navbar since it wasn't being used - Updated
 navigation bar - Added vertical tabs to components page

---
 src/App.css                  | 10 ++++++++++
 src/Navbar.js                | 22 ----------------------
 src/components/Components.js | 16 ++++------------
 src/components/Navigation.js | 32 +++++++++++++++-----------------
 4 files changed, 29 insertions(+), 51 deletions(-)
 delete mode 100644 src/Navbar.js

diff --git a/src/App.css b/src/App.css
index 25f84a7..4a4a0cb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -31,6 +31,16 @@
   color: #61dafb;
 }
 
+.nav-pills .nav-link.active {
+  background-color: #6ab445;
+}
+.nav-link {
+  color: black;
+}
+.nav-link:hover {
+  color: darkgrey;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/src/Navbar.js b/src/Navbar.js
deleted file mode 100644
index df03ac6..0000000
--- a/src/Navbar.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Nav, NavDropdown } from "react-bootstrap"
-import { Link } from "react-router-dom"
-
-const Navbar = () => {
-  return (
-  <Nav className="navbar navbar-expand-lg navbar-dark bg-primary">
-  <div className="container">
-    <Link className="navbar-brand" to={'/'}>React DEMO</Link>
-    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
-      <span className="navbar-toggler-icon"></span>
-    </button>
-    <NavDropdown title="Components" id="nav-dropdown">
-        <NavDropdown.Item eventKey="4.1"><Link to={'/components/renderer'}>Form Renderer</Link></NavDropdown.Item>
-        <NavDropdown.Item eventKey="4.2"><Link to={'/components/builder'}>Form Builder</Link></NavDropdown.Item>
-        <NavDropdown.Divider />
-        <NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
-      </NavDropdown>
-  </div>
-</Nav>)
-}
-
-export default Navbar
\ No newline at end of file
diff --git a/src/components/Components.js b/src/components/Components.js
index 691819e..dcf8020 100644
--- a/src/components/Components.js
+++ b/src/components/Components.js
@@ -1,5 +1,5 @@
 import { Col, Container, Nav, Row, Tab } from "react-bootstrap"
-import { Link, useParams } from "react-router-dom"
+import { useParams } from "react-router-dom"
 import Builder from "./Builder"
 import CustomBuilder from "./CustomBuilder"
 import PDFForm from "./PDFForm"
@@ -14,41 +14,32 @@ const Components = () => {
      <Tab.Container id="left-tabs-example" defaultActiveKey={'renderer'}>
       <Row>
         <Col sm={2}>
-          <Nav.Item variant="pills" className="flex-column">
+          <Nav variant="pills" className="flex-column">
+          <Nav.Item >
             <Nav.Item>
-              <Link to="component">
               <Nav.Link eventKey="renderer">
                 Form Renderer
               </Nav.Link>
-              </Link>
             </Nav.Item>
             <Nav.Item>
-              <Link to="component">
               <Nav.Link eventKey="builder">
                 Form Builder
               </Nav.Link>
-              </Link>
               </Nav.Item>
             <Nav.Item>
-              <Link to="component">
               <Nav.Link eventKey="simple">
                 Simple Form
               </Nav.Link>
-              </Link>
             </Nav.Item>
             <Nav.Item>
-              <Link to="component">
               <Nav.Link eventKey="wizard">
                 Wizard Form
               </Nav.Link>
-              </Link>
             </Nav.Item>
             <Nav.Item>
-              <Link to="component">
               <Nav.Link eventKey="pdf">
                 PDF Form
               </Nav.Link>
-              </Link>
             </Nav.Item>
             {/* <Nav.Item>
               <Nav.Link eventKey="custom" href="/components/custom">
@@ -56,6 +47,7 @@ const Components = () => {
               </Nav.Link>
             </Nav.Item> */}
           </Nav.Item>
+          </Nav>
         </Col>
         <Col sm={10} style={{borderLeft: '1px solid #eaeaea', padding: '10px 20px'}}>
           <Tab.Content>
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index b0ca8b7..96a8a9e 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,27 +1,25 @@
-import { Container, Nav, NavDropdown, Navbar } from "react-bootstrap"
+import { Container, Nav, Navbar } from "react-bootstrap"
 import Image from 'react-bootstrap/Image'
-import { Link } from "react-router-dom";
 import logo from '../Light-Background.png';
 
 function Navigation() {
     return (
       <Navbar bg="light" expand="lg">
         <Container>
-        <Navbar.Brand >
-          <Link to={'/'}>
-          <Image src={logo} style={{height: '2.2rem'}}></Image> React Demo
-          </Link>
-          </Navbar.Brand>
-          <Navbar.Toggle aria-controls="basic-navbar-nav" />
-          <Navbar.Collapse id="basic-navbar-nav">
-            <Nav>
-              <Nav.Link><Link to="components">Components </Link></Nav.Link>
-              <Nav.Link><Link to="components">Examples</Link></Nav.Link>
-              <Nav.Link href="https://github.com/formio/react"><i className="fa fa-book"></i> Docs</Nav.Link>
-              <Nav.Link href="https://github.com/formio/react">Star</Nav.Link>
-              <Nav.Link href="https://github.com/formio/react/fork">Fork</Nav.Link>
-            </Nav>
-          </Navbar.Collapse>
+        <Image src={logo} style={{height: '2.5rem', paddingRight: '.8rem'}}></Image>
+        <Navbar.Brand href="/react-app-starterkit/">
+           React Demo
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="me-auto">
+            <Nav.Link href="components">Components</Nav.Link>
+            <Nav.Link href="examples">Examples</Nav.Link>
+            <Nav.Link href="https://github.com/formio/react"><i className="fa fa-book"></i> Docs</Nav.Link>
+            <Nav.Link href="https://github.com/formio/react">Star</Nav.Link>
+            <Nav.Link href="https://github.com/formio/react/fork">Fork</Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
       </Container>
   </Navbar>
   );