moved all css files to module files to seperate into namespaces and prevent name overlaps

src/elements/SideBar/SideBar.js

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