(refactor): creating layout module

src/components/HelloWorld/index.js

@@ -0,0 +1 @@
+export { default as HelloWorld } from "./HelloWorld";

src/components/index.js

@@ -1,4 +1,2 @@
-export { default as SidebarMenu } from "./SidebarMenu";
-export { default as Content } from "./Content";
-export { default as Footer } from "./Footer";
-export { default as NavBar } from "./NavBar";
+export { Content, Footer, SidebarMenu, NavBar } from "./layout";
+export { HelloWorld } from "./HelloWorld";

src/components/Content.js → src/components/layout/Content/Content.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import HelloWorld from './HelloWorld.js';
+import { HelloWorld } from '../../HelloWorld';
 import {Route} from 'react-router-dom';
-import '../_styles/Content.css';
+import './Content.css';
 
 class Content extends React.Component {
   render() {

src/components/layout/Content/index.js

@@ -0,0 +1 @@
+export { default as Content } from "./Content";

src/components/Footer.js → src/components/layout/Footer/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Link} from 'office-ui-fabric-react/lib-commonjs/Link'
-import '../_styles/Footer.css'
+import './Footer.css'
 
 const Footer = () => (
   <div className="footer-container">

src/components/layout/Footer/index.js

@@ -0,0 +1 @@
+export { default as Footer } from "./Footer";

src/components/NavBar.js → src/components/layout/NavBar/NavBar.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import {SearchBox} from 'office-ui-fabric-react/lib-commonjs/SearchBox'
-import '../_styles/NavBar.css'
+import { SearchBox } from 'office-ui-fabric-react/lib-commonjs/SearchBox'
+import './NavBar.css'
 
-const NavBar = ({onChange, onSearch}) => (
+const NavBar = ( { onChange, onSearch } ) => (
   <div className="NavBar">
     <div className="logo ms-font-xl">
       <strong>React with Firebase and Fabric UI</strong>

src/components/layout/NavBar/index.js

@@ -0,0 +1 @@
+export { default as NavBar } from "./NavBar";

src/components/SidebarMenu.js → src/components/layout/SidebarMenu/SidebarMenu.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import '../_styles/SideBarMenu.css'
+import './SideBarMenu.css'
 import {Link} from 'react-router-dom';
 
 const SidebarMenu = ({groups, expanded, collapsed}) => (

src/components/layout/SidebarMenu/index.js

@@ -0,0 +1 @@
+export { default as SidebarMenu } from "./SidebarMenu";

src/components/layout/index.js

@@ -0,0 +1,4 @@
+export { Content } from "./Content";
+export { Footer } from "./Footer";
+export { NavBar } from "./NavBar";
+export { SidebarMenu } from "./SidebarMenu";