minor refactor and ui change

Author: TamimEhsan

package-lock.json

@@ -1,10 +1,9 @@
-import React, {Component} from 'react';
-import Navbar from "./navbar";
+import { times } from 'lodash';
+import React, { Component } from 'react';
 import FlipMove from 'react-flip-move';
-import SvgLines from 'react-mt-svg-lines';
 import '../helpers/array_helpers';
 import './style.css';
-import {times} from 'lodash';
+import Navbar from '../components/navbar';
 
 const FLIP_DURATION = 750;
 
@@ -35,7 +34,7 @@ class Puzzle extends Component {
             <div style={{backgroundColor: "#57407c"}}
                  className={'full-height'}
             >
-                <Navbar/>
+                <Navbar title={"15 Puzzle"}/>
                 <div className={'justify-content-around '}
                      style={{textAlign: "Center"}}>
                     <div style={{textAlign: "center", height: "440px", width: "440px", margin: 'auto'}}

src/15puzzleComponents/navbar.jsx

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import CanvasSvg from "./canvasSVG";
 import {getFibTree, getTree} from "./fib";
 import Menu from "./menu";
-import Navbar from "./navbar";
+import Navbar from '../components/navbar';
 import Details from "./details";
 
 class Graph extends Component {
@@ -100,16 +100,16 @@ class Graph extends Component {
     render() {
         return (
             <div>
-                <Navbar/>
+                <Navbar title="Recursion Tree"/>
                 <Menu
                     setN={this.setN}
                     setR={this.setR}
                     setAlgo={this.setAlgo}
                     onStart={this.addNumber}
                 />
-                <Details
+                {/* <Details
                     algo={this.state.algo}
-                />
+                /> */}
                 <CanvasSvg
                     vertices={this.state.vertices}
                     edges={this.state.edges}

src/15puzzleComponents/puzzle.jsx

@@ -5,7 +5,7 @@ import Ribbon from "./ribbon";
 
 import {getNextStep, getTable} from '../algorithms/turing';
 import Menu from "./menu";
-import Navbar from "./navbar";
+import Navbar from '../components/navbar';
 import Table from "./table";
 
 class TuringMachine extends Component {
@@ -131,7 +131,7 @@ class TuringMachine extends Component {
     render() {
         return (
             <div>
-                <Navbar/>
+                <Navbar title="Turing Machine"/>
                 <Menu
                     visualize={this.handleStart}
                     onAlgoChanged={this.setAlgo}

src/Graph/graph.jsx

@@ -1,7 +1,7 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import EntryPoint from "./entryPoint";
 import Search from "./search";
-import Navbar from "./navbar";
+import Navbar from '../components/navbar';
 
 class BinarySearch extends Component {
     state={
@@ -13,7 +13,7 @@ class BinarySearch extends Component {
     render() {
         return (
             <div>
-                <Navbar/>
+                <Navbar title={"Binary Search"}/>
                 <br />
                 <br />
                 <br />

src/Graph/navbar.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+export default function Navbar(props){
+    
+    return (
+        <nav className="navbar navbar-expand-lg navbar-dark bg-light">
+            <div>
+            <span className="navbar-brand text-black px-3">{props.title}</span>
+            <Link to={"/"} className="text-decoration-none text-black"> Home </Link>
+            </div>
+            {/* <button className="navbar-toggler" type="button" data-toggle="collapse"
+                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"></span>
+            </button>
+            <div className="collapse navbar-collapse" id="navbarSupportedContent" >
+                <Link to={"/"} className="text-decoration-none text-black"> Home </Link>
+            </div> */}
+
+        </nav>
+    );
+    
+}