some reformattings

added badges

src/elements/SideBar/SideBar.css

@@ -0,0 +1,24 @@
+.sideinfo {
+    width: 20%;
+    float: left;
+    padding: 20px;
+    margin-top: 25px;
+    margin-left: 15px;
+    background-color: #b4c7fe;
+    border-radius: 20px;
+    border: 2px #3574fe solid;
+    overflow: hidden;
+}
+
+.sidebartitle {
+    font-weight: bold;
+    font-size: larger;
+}
+
+.sidebarinfo {
+    margin-top: 5px;
+    background-color: #8ca3fc;
+    border-radius: 5px;
+    padding: 2px 10px 2px 15px;
+    width: 220px;
+}

src/elements/SideBar/SideBar.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./SideBar.css"
+
+class SideBar extends React.Component {
+    render() {
+        return (<div className='sideinfo'>
+            {this.props.children}
+        </div>);
+    }
+}
+
+export default SideBar;

src/elements/SideBar/SideBar.test.js

@@ -0,0 +1,20 @@
+import React from "react";
+import ReactDom from 'react-dom'
+import SideBar from "./SideBar";
+
+import {render} from '@testing-library/react'
+import "@testing-library/jest-dom"
+
+describe('<SideBar/>', function () {
+    it('renders without crashing ', function () {
+        const div = document.createElement("div");
+        ReactDom.render(<SideBar/>,div);
+        ReactDom.unmountComponentAtNode(div);
+    });
+
+    it('renders childs correctly', function () {
+        const {getByText} = render(<SideBar>test</SideBar>);
+        const randomElement = getByText(/test/i);
+        expect(randomElement).toBeInTheDocument();
+    });
+});