Changed Modal to Sidebar w/ Segment

Author: gordenstein72

src/algos.ts

@@ -1,6 +1,7 @@
 //used for information pop up
 export default {
-  a: "A* pronounced A-Star was originally created in an attempt to create a general purpose robot as part of the Shakey\
+  a: " ### A* Info\
+    \nA* pronounced A-Star was originally created in an attempt to create a general purpose robot as part of the Shakey\
      project in the 1960’s and 70’s. A* is a best-first search algorithm.\
      \n### Runtime: \
     \nThe time complexity is polynomial when the search space is a tree, there is a single goal state,\
@@ -11,25 +12,29 @@ export default {
     \n[The Coding Train (video part1)] (https://www.youtube.com/watch?v=aKYlikFAV4k&t=968s) \
     \n[Computerphile (video)] (https://www.youtube.com/watch?v=ySN5Wnu88nE )",
 
-  BFS: "Breadth-First Search is a graph or tree traversing algorithm that looks at all nodes at the current level \
+  BFS: "### BFS Info\
+    \nBreadth-First Search is a graph or tree traversing algorithm that looks at all nodes at the current level \
     before moving onto the next deepest set of nodes. It was created by Konrad Zuse in 1945 and later reinvented by Edward F. Moore in 1959. \
     \n### Runtime:\
     \nO( | V | + | E |) where V is the number of nodes and E the number of edges.\
     \n### Helpful links: \
     \n[TheHippieCat (video)] (https://www.youtube.com/watch?v=WvR9voi0y2I)\
     \n[Nesbox (README)] (https://github.com/nesbox/TIC-80/wiki/Pathfinding%EA%9E%89-BFS-Algorithm)",
 
-  DFS: "Depth-first search is a pathfinding or tree spanning algorithm that follows one branch to its deepest point before backtracking. \
+  DFS: "### DFS Info\
+    \nDepth-first search is a pathfinding or tree spanning algorithm that follows one branch to its deepest point before backtracking. \
     It was created in the 19th century by French mathematician Charles Pierre Trémaux. \
     \n### Runtime:\
     \nO( | V | + | E |) where V is the number of nodes and E the number of edges.\
     \n### Helpful links:\
     \n[Brilliant (articel)] (https://brilliant.org/wiki/depth-first-search-dfs)\
     \n[Go GATE IIT (video)](https://www.youtube.com/watch?v=iaBEKo5sM7w)",
 
-  Djikstras: "Djikstra's shortest path first Algorithm is a pathfinding algorithm created by Edsger W. Djikstra in 1956. \
+  Djikstras: "### Djikstra's Algorithm Info\
+        \nDjikstra's shortest path first Algorithm is a pathfinding algorithm created by Edsger W. Djikstra in 1956. \
         It uses a min-priority queue to find the shortest path of a weighted graph. \
-        \n### Runtime: (Min-priority queue) O(| V | +| E |log| V |) (where | V | s the number of nodes and | E | is the number of edges)\
+        \n### Runtime: \
+        \n(Min-priority queue) O(| V | +| E |log| V |) (where | V | s the number of nodes and | E | is the number of edges)\
         \n(Array) O(V^2)\
         \n### Helpful links:\
         \n[Computerphile (video)](https://www.youtube.com/watch?v=GazC3A4OQTE)\

src/components/Menu/index.tsx

@@ -11,6 +11,8 @@ import {
   Modal,
   Form,
   TextAreaProps,
+  Sidebar,
+  Segment
 } from "semantic-ui-react";
 import { MazeInfo, Space } from "../../models/maze";
 import * as yup from "yup";
@@ -60,6 +62,7 @@ export interface _MenuState {
   showModal: boolean;
   hasError: boolean;
   errorMessage: string;
+  sidebar: boolean;
 }
 
 export const yupSpaceSchema = yup.object({
@@ -77,6 +80,7 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
     showModal: false,
     hasError: false,
     errorMessage: "",
+    sidebar: false
   };
 
   checkDynamicKeys = (keys: any[]): boolean => {
@@ -205,6 +209,10 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
     return al as string;
   };
 
+  setVisible = (b: boolean) => {
+    this.setState({ ...this.state, sidebar: b });
+  }
+
   render() {
     const {
       canMoveStart,
@@ -330,22 +338,28 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
             options={algorithms}
           />
           &nbsp; {/* Essentially just a fancy space */}
-          <Modal
-            trigger={
-              <Button color="blue" circular>
-                <Icon name="info" />
-              </Button>
-            }
-            centered={false}
-            closeIcon
+          <Button color="blue" circular onClick = {() => this.setVisible(true)}>
+            <Icon name="info" />
+          </Button>
+          <Sidebar
+            as={Menu}
+            animation='push'
+            overlay
+            icon='labeled'
+            direction='right'
+            onHide={() => this.setVisible(false)}
+            vertical
+            visible={this.state.sidebar}
+            width='very wide'
           >
-            <Modal.Header>{selectedAlgo} Algorithm Info</Modal.Header>
-            <Modal.Content>
-              <Modal.Description>
-                <ReactMarkdown source={this.getInfo()} />
-              </Modal.Description>
-            </Modal.Content>
-          </Modal>
+          <Segment textAlign='left' padded='very'>
+           <ReactMarkdown source={this.getInfo()} text-color = "white" />
+          </Segment>
+          
+          </Sidebar>
+          
+            
+            
         </Menu.Item>
       </Menu>
     );