#5, Реализована навигация по приложению

src/components/Header/Header.js

+import React from "react";
+import {Container, Nav, Navbar, NavbarBrand, NavItem} from "reactstrap";
+import {NavLink} from "react-router-dom";
+
+const Header = () => {
+    return (
+        <Navbar color="dark" dark expand="md" className="mb-5">
+            <Container>
+                <NavbarBrand tag={NavLink} to="/" exact>Quotes Central</NavbarBrand>
+                <Nav navbar>
+                    <NavItem>
+                        <NavLink className="nav-link" to="/quotes">Quotes</NavLink>
+                    </NavItem>
+                    <NavItem>
+                        <NavLink className="nav-link" to="/add-quote">Add Quote</NavLink>
+                    </NavItem>
+                </Nav>
+            </Container>
+        </Navbar>
+    );
+};
+
+export default Header;

src/components/Quote/Quote.js

@@ -4,7 +4,7 @@ import { Card, Button, CardFooter, CardBody,
 
 const Quote = props => {
     return (
-        <div>
+        <div className='Quote mb-3'>
             <Card>
                 <CardBody>
                     <CardTitle className='text-uppercase font-weight-bold'>{props.author}</CardTitle>

src/components/Sidebar/Sidebar.js

+import React from "react";
+import {Container, Nav, Navbar, NavbarBrand, NavItem} from "reactstrap";
+import {NavLink} from "react-router-dom";
+import CATEGORIES from "../../quotes-categories";
+
+const Sidebar = () => {
+
+    const printCategories = () => {
+        return CATEGORIES.map(category => {
+            return <NavItem>
+                <NavLink className="nav-link" to={'/quotes/' + category.id} >{category.title}</NavLink>
+            </NavItem>
+        })
+
+    };
+
+    return (
+        <Navbar light>
+        <Nav navbar>
+            <NavItem>
+                <NavLink className="nav-link font-weight-bold text-uppercase" to="/quotes">All</NavLink>
+            </NavItem>
+                {printCategories()}
+        </Nav>
+        </Navbar>
+    );
+};
+
+export default Sidebar;
\ No newline at end of file

src/containers/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App_wrapper {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  justify-content: space-between;
 }
-
-.App-link {
-  color: #61dafb;
+.App_sidebar{
+  flex-basis: 20%;
 }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.App_switches {
+  flex-basis: 73%;
 }
+

src/containers/App.js

@@ -4,20 +4,29 @@ import {Container} from "reactstrap";
 import './App.css';
 import QuoteForm from "./QuoteForm/QuoteForm";
 import Quotes from "./Quotes/Quotes";
+import Header from "../components/Header/Header";
+import Sidebar from "../components/Sidebar/Sidebar";
 
 function App() {
-  return (
-      <>
-          <Container>
-              <Switch>
-                  <Route path="/add-quote" exact component={QuoteForm}/>
-                  <Route path="/" exact component={Quotes}/>
-                  <Route path="/quotes/" exact component={Quotes}/>
-                  <Route path="/quotes/:category" exact component={Quotes}/>
-              </Switch>
-          </Container>
-      </>
-  );
+    return (
+        <>
+
+            <Header/>
+            <Container className='App_wrapper'>
+                <div className="App_sidebar">
+                    <Sidebar/>
+                </div>
+                <div className="App_switches">
+                    <Switch>
+                        <Route path="/add-quote" exact component={QuoteForm}/>
+                        <Route path="/" exact component={Quotes}/>
+                        <Route path="/quotes/" exact component={Quotes}/>
+                        <Route path="/quotes/:category" exact component={Quotes}/>
+                    </Switch>
+                </div>
+            </Container>
+        </>
+    );
 }
 
 export default App;

src/containers/Quotes/Quotes.js

@@ -19,7 +19,7 @@ const Quotes = props => {
                     console.log(error)
                 })
         }
-        , []);
+        , [props.match.params.category]);
 
 
     const printQuotes = () => {