Added sidebar, home page and login page

src/actionTypes/actionTypes.js

@@ -8,4 +8,6 @@ export const GET_EVENTS_REQUEST_FAIL = "GET_EVENTS_REQUEST_FAIL";
 
 export const REMOVE_EVENT_REQUEST = "REMOVE_EVENT_REQUEST";
 export const REMOVE_EVENT_REQUEST_SUCCESS = "REMOVE_EVENT_REQUEST_SUCCESS";
-export const REMOVE_EVENT_REQUEST_FAIL = "REMOVE_EVENT_REQUEST_FAIL";
+export const REMOVE_EVENT_REQUEST_FAIL = "REMOVE_EVENT_REQUEST_FAIL";
+
+export const SHOW_SIDEBAR = "SHOW_SIDEBAR";

src/actions/show-sidebar.js

@@ -0,0 +1,5 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const showSidebar = () => ({
+    type: types.SHOW_SIDEBAR
+});

src/components/login-form/LoginForm.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import './login.scss';
+
+let LoginForm = props => {
+    const { handleSubmit } = props;
+
+    const submit = value => {
+        console.log(value)
+    };
+
+    return (
+        <form className="form" onSubmit={handleSubmit(submit)}>
+            <div>
+                <label htmlFor="email">E-mail</label>
+                <Field name="email" component="input" type="text" />
+            </div>
+            <div>
+                <label htmlFor="password">Password</label>
+                <Field name="password" component="input" type="text" />
+            </div>
+            <button type="submit">Submit</button>
+        </form>
+        )
+};
+
+LoginForm = reduxForm({
+    form: 'login'
+})(LoginForm)
+
+export default LoginForm

src/components/login-form/login.scss

@@ -0,0 +1 @@
+@import "../../styles/variables";

src/components/sidebar/Sidebar.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+//import { connect } from "react-redux";
+
+import './sidebar.scss';
+
+const siteMenu = [
+    {
+        text: 'Home',
+        href: '/',
+        id: 0
+    },
+    {
+        text: 'Races',
+        href: '/races',
+        id: 1
+    },
+    {
+        text: 'Result',
+        href: '/result',
+        id: 2
+    },
+    {
+        text: 'Gallery',
+        href: '/gallery',
+        id: 3
+    },
+    {
+        text: 'Reviews',
+        href: '/reviews',
+        id: 4
+    },
+    {
+        text: 'Login',
+        href: '/login',
+        id: 5
+    }
+];
+
+export default class Sidebar extends React.Component {
+    render() {
+        return (
+            <div className="menu">
+                <nav>
+                    <div className="logo">
+                        <Link to="/">
+                            Sport
+                        </Link>
+                    </div>
+                    <ul>
+                        {
+                            siteMenu.map(link =>
+                                <li key={link.id}>
+                                    <Link to={link.href}>{link.text}</Link>
+                                </li>
+                            )
+                        }
+                    </ul>
+                </nav>
+                <div className="menu-skew">
+                    <div className="img-bg"></div>
+                </div>
+            </div>
+        )
+    }
+}

src/components/sidebar/sidebar.scss

@@ -0,0 +1,117 @@
+@import "../../styles/variables";
+
+.menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    max-width: 320px;
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+        nav {
+            ul {
+                transform: translate(-30px, 0);
+            }
+        }
+
+        .menu-skew {
+            left: -160px;
+            opacity: 1;
+
+            .img-bg {
+                opacity: 1;
+            }
+        }
+    }
+
+    nav {
+        position: relative;
+        z-index: 3;
+        padding: 20px;
+
+        .logo {
+            margin-bottom: 30px;
+
+            a {
+                color: $color-white;
+                font-weight: $bold;
+                font-size: 30px;
+            }
+        }
+
+        ul {
+            padding-left: 50px;
+            transform: translate(-50px, 0);
+            transition: 0.6s;
+
+            li {
+                a {
+                    position: relative;
+                    display: inline-block;
+                    color: $color-white;
+                    font-weight: $semi-bold;
+                    font-size: 18px;
+                    padding: 10px 0;
+                    opacity: 0.7;
+                    transition: 0.5s;
+                    cursor: pointer;
+
+                    &:before {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        top: 50%;
+                        left: -50px;
+                        width: 40px;
+                        height: 2px;
+                        background: $color-white;
+                        transform: translate(0, -3px);
+                        transition: 0.5s;
+                    }
+
+                    &:hover {
+                        padding-left: 10px;
+                        opacity: 1;
+
+                        &:before {
+                            width: 63px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .menu-skew {
+        position: absolute;
+        top: 0;
+        left: -250px;
+        height: 100%;
+        width: 400px;
+        background: $color-blue;
+        z-index: 1;
+        overflow: hidden;
+        transform: skewX(-17deg);
+        opacity: 0.5;
+        transition: 0.5s;
+    }
+
+    .img-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+        height: 100%;
+        width: 200%;
+        transform: skewX(17deg);
+        background-image: url(https://herbalife24tri.la/static/media/LA-bg.c300a964.jpg);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        opacity: 0;
+        transition: 0.3s;
+    }
+}

src/conteiners/home/Home.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import './home.scss';
+
+export default class Home extends React.Component {
+    state = {
+        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1562893179~acl=%2A%2F1021052489.mp4%2A~hmac=6ef33efd6a7867f05a06d888e576e87a48b2f33f42ca65ed7e78cd0d7a5cf3b0/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
+    }
+
+    render() {
+        return (
+            <div className="hero">
+                <h1>International triathlon competitions among professionals and amateurs</h1>
+
+                <div className="bg"></div>
+                <div className="bg-img"></div>
+
+                <video id="background-video" loop autoPlay>
+                    <source src={this.state.videoURL} type="video/mp4" />
+                    <source src={this.state.videoURL} type="video/ogg" />
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        )
+    }
+}

src/conteiners/home/home.scss

@@ -0,0 +1,56 @@
+@import "../../styles/variables";
+
+.hero {
+    min-height: 100vh;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    h1 {
+        font-size: 36px;
+        color: $color-white;
+    }
+
+    .bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: $color-black;
+        opacity: 0.8;
+        z-index: 3;
+        height: 100%;
+        width: 100%;
+    }
+
+    .bg-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        background-image: url(https://cdn.pixabay.com/photo/2015/03/08/21/06/cycling-664753_960_720.jpg);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+
+        @media (min-width: 992px) {
+            display: none;
+        }
+    }
+
+    video {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+
+        @media (max-width: 991px) {
+            display: none;
+        }
+    }
+}

src/conteiners/login/Login.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { connect } from "react-redux";
+
+import { showSidebar } from "../../actions/show-sidebar";
+
+import LoginForm from '../../components/login-form/LoginForm';
+
+export class Login extends React.Component {
+
+    componentDidMount() {
+        this.props.showSidebar()
+    }
+
+    componentWillUnmount() {
+        this.props.showSidebar()
+    }
+
+    render() {
+        return ( <LoginForm/> )
+    }
+};
+
+const mapStateToProps = state => {
+    return {
+        showSidebarBool: state.Sidebar.showSidebar
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { showSidebar }
+)(Login);

src/reducers/combineReducers.js

@@ -2,8 +2,10 @@ import { combineReducers } from "redux";
 import { reducer as formReducer } from "redux-form";
 
 import adminMainPageReducer from "./adminMainPageReducer";
+import Sidebar from "./show-sidebar";
 
 export default combineReducers({
 	form: formReducer,
-	adminMainPageReducer
+	adminMainPageReducer,
+	Sidebar
 });

src/reducers/show-sidebar.js

@@ -0,0 +1,15 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    showSidebar: true
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.SHOW_SIDEBAR: {
+            return { ...state, showSidebar: !state.showSidebar };
+        }
+        default:
+            return state;
+    }
+}

src/router.js

@@ -1,19 +1,70 @@
 import React from 'react'
 import { Switch, Route } from "react-router-dom";
+import { connect } from "react-redux";
+
 import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
-import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage'
+import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
+import Home from './conteiners/home/Home';
+import Login from './conteiners/login/Login';
+
 import EventReduxForm from "./components/eventForm/eventReduxForm"
 import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
+import Sidebar from './components/sidebar/Sidebar';
+
+export class Router extends React.Component {
+	render() {
+		const { showSidebarBool } = this.props
+		return(
+			<>
+				{showSidebarBool && <Sidebar /> }
+				<div className="container">
+			        <Switch>
+			        	<Route exact path="/" component={Home} />
+
+	                    <Route exact path="/races" render={() => (
+	                        <div className="text-center">
+	                            Races
+	                        </div>
+	                    )} />
+
+	                    <Route exact path="/result" render={() => (
+	                        <div className="text-center">
+	                            Result
+	                        </div>
+	                    )} />
+
+	                    <Route exact path="/gallery" render={() => (
+	                        <div className= "text-center">
+	                            Gallery
+	                        </div>
+	                    )} />
+
+	                    <Route exact path="/reviews" render={() => (
+	                        <div className="text-center">
+	                            Reviews
+	                        </div>
+	                    )} />
+
+	                    <Route exact path="/login" component={Login} />
+			           
+			            <Route exact path = '/admin' component = {AdminMainPage} />
+			            <Route exact path = '/admin/add_new_event' component = {AdminAddEventPage} />
+			            <Route exact path = '/admin/my_events' component = {EventReduxForm} />
+			            <Route exact path = '/admin/photogalary' component = {AdminAddPhotogalarytPage} />
+			            
+			        </Switch>
+			    </div>
+		    </>
+		)
+	}
+}
+
+const mapStateToProps = state => {
+    return {
+        showSidebarBool: state.Sidebar.showSidebar
+    };
+};
 
-export default () => (
-    <div className="container">
-        <Switch>
-           
-            <Route exact path = '/admin' component = {AdminMainPage} />
-            <Route exact path = '/admin/add_new_event' component = {AdminAddEventPage} />
-            <Route exact path = '/admin/my_events' component = {EventReduxForm} />
-            <Route exact path = '/admin/photogalary' component = {AdminAddPhotogalarytPage} />
-            
-        </Switch>
-    </div>
-);
+export default connect(
+    mapStateToProps
+)(Router);