Cool transitions starter

src/App.js

@@ -12,6 +12,7 @@ import AccordionFaq from "./episodes/AccordionFaq/AccordionFaq";
 import Sidebar from "./episodes/Sidebar/Sidebar";
 import Combobox from "./episodes/Combobox/Combobox";
 import FancyButtons from "./episodes/FancyButtons/FancyButtons";
+import CoolTransitions from "./episodes/CoolTransitions/CoolTransitions";
 
 const App = () => {
   return (
@@ -20,6 +21,9 @@ const App = () => {
       <Router>
         <Navigation />
         <Switch>
+          <Route path="/cool-transitions">
+            <CoolTransitions />
+          </Route>
           <Route path="/fancy-buttons">
             <FancyButtons />
           </Route>

src/components/Navigation/Navigation.js

@@ -74,6 +74,9 @@ const Navigation = () => {
                 <NavListItem>
                     <StyledNavLink isOpen={isOpen} to="/fancy-buttons">Fancy Buttons</StyledNavLink>
                 </NavListItem>
+                <NavListItem>
+                    <StyledNavLink isOpen={isOpen} to="/cool-transitions">Cool Transitions</StyledNavLink>
+                </NavListItem>
             </NavList>
         </Nav>
     )

src/episodes/CoolTransitions/CoolTransitions.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {Route, Switch} from "react-router-dom";
+import {NavLink} from "react-router-dom";
+import Demo1 from "./Demo1";
+import Demo2 from "./Demo2";
+import Demo3 from "./Demo3";
+import Demo4 from "./Demo4";
+import styled from 'styled-components';
+
+const Navigation = styled.div`
+  position: absolute;
+  bottom: 20px;
+  right: 40px;
+  
+  a {
+    margin-left: 30px;
+  }
+`;
+
+const CoolTransitions = () => {
+    return (
+        <>
+            <Navigation>
+                <NavLink to='/cool-transitions'>Demo 1</NavLink>
+                <NavLink to='/cool-transitions/demo-2'>Demo 2</NavLink>
+                <NavLink to='/cool-transitions/demo-3'>Demo 3</NavLink>
+                <NavLink to='/cool-transitions/demo-4'>Demo 4</NavLink>
+            </Navigation>
+            <Switch>
+                <Route path="/cool-transitions/demo-2">
+                    <Demo2 />
+                </Route>
+                <Route path="/cool-transitions/demo-3">
+                    <Demo3 />
+                </Route>
+                <Route path="/cool-transitions/demo-4">
+                    <Demo4 />
+                </Route>
+                <Route path="/cool-transitions">
+                    <Demo1 />
+                </Route>
+            </Switch>
+        </>
+    )
+};
+
+export default CoolTransitions

src/episodes/CoolTransitions/Demo1.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Demo1 = () => {
+    return (
+        <div>Demo 1</div>
+    )
+};
+
+export default Demo1;

src/episodes/CoolTransitions/Demo2.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Demo2 = () => {
+    return (
+        <div>Demo 2</div>
+    )
+};
+
+export default Demo2;

src/episodes/CoolTransitions/Demo3.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Demo3 = () => {
+    return (
+        <div>Demo 3</div>
+    )
+};
+
+export default Demo3;

src/episodes/CoolTransitions/Demo4.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Demo4 = () => {
+    return (
+        <div>Demo 4</div>
+    )
+};
+
+export default Demo4;

src/episodes/FancyButtons/FancyButtons.js

@@ -65,7 +65,7 @@ const ButtonA = styled(StyledButton)`
   }
 `;
 
-const ButtonB = styled(StyledButton)`
+export const ButtonB = styled(StyledButton)`
   border: 3px solid black;
   position: relative;
   overflow: hidden;