The page gallery is created

src/components/sidebar/sidebar.scss

@@ -210,12 +210,18 @@
         .img-bg {
             opacity: 0;
         }
+
         .burgerIcon {
             display: none;
         }
     }
 
     @media (max-width: $medium) {
+        .menu-skew {
+            left: -20rem;
+            opacity: 1;
+        }
+
         nav {
             padding-top: 10rem;
         }

src/conteiners/events/Events.js

@@ -17,6 +17,7 @@ export class Events extends React.Component {
 
     render() {
         const { events } = this.props;
+        console.log(events);
         return (
             <>
                 <Sidebar />

src/conteiners/gallery/Gallery.js

@@ -1,12 +1,21 @@
 import React from 'react';
+import { connect } from "react-redux";
+
+import { getPhotogalary } from "../../actions/photogalaryActions";
 
 import './gallery.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
 
-export default class Gallery extends React.Component {
+class Gallery extends React.Component {
+    componentDidMount() {
+        this.props.getPhotogalary()
+    }
+
     render() {
+        const { gallery } = this.props;
+        console.log('gallery', this.props.gallery);
         return (
             <>
                 <Sidebar/>
@@ -15,8 +24,43 @@ export default class Gallery extends React.Component {
                         <h2>Gallery page</h2>
                     </div>
                 </div>
+                <div className="container-wrap">
+                    <div className="gallery-wrap">
+                        {
+                            gallery.map((item,ind) => 
+                                <div className="gallery-item" key={ind}>
+                                    <h3>{item.eventTitle}</h3>
+                                    <h5>{item.eventType}</h5>
+
+                                    <div className="gallery-photo">
+                                        {
+                                            item.pictures.map((photo,ind) => 
+                                                <div className="photo-item" key={ind}>
+                                                    <div className="photo-item-bg">
+                                                        <img src={photo} alt="photo" />
+                                                    </div>
+                                                </div>
+                                            )
+                                        }
+                                    </div>
+                                </div>
+                            )
+                        }
+                    </div>
+                </div>
                 <Footer/>
             </>
         )
     }
-}
+};
+
+const mapStateToProps = state => {
+    return {
+        gallery: state.photogalaryReducer.gallery
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getPhotogalary }
+)(Gallery);

src/conteiners/gallery/gallery.scss

@@ -1 +1,66 @@
 @import "../../styles/variables";
+
+.gallery {
+    &-wrap {
+        padding: 5rem 0;
+    }
+
+    &-item {
+        text-align: center;
+
+        &:not(:last-child) {
+            padding-bottom: 3rem;
+            margin-bottom: 5rem;
+            border-bottom: 1px solid $color-blue;
+        }
+
+        h3 {
+            font-size: 2.4rem;
+        }
+
+        h5 {
+            font-size: 1.8rem;
+            color: $color-blue;
+            margin-bottom: 2rem;
+        }
+
+        .gallery-photo {
+            display: flex;
+            flex-wrap: wrap;
+            margin: 0 -1rem;
+        }
+
+        .photo-item {
+            width: 33.33%;
+            padding: 1rem;
+
+            &-bg {
+                display: flex;
+                align-items: center;
+                height: 100%;
+                background: $color-grey-light;
+                border: 3px solid $color-grey-light;
+            }
+
+            img {
+                width: 100%;
+            }
+        }
+    }
+
+    @media(max-width: $small) {
+        &-item {
+            .photo-item {
+                width: 50%;
+            }
+        }
+    }
+
+    @media(max-width: $xsmall) {
+        &-item {
+            .photo-item {
+                width: 100%;
+            }
+        }
+    }
+}

src/reducers/photogalaryReducer.js

@@ -23,10 +23,10 @@ export default (state = initialState, action) => {
 			return state;
 		}
 		case types.GET_PHOTOGALARY_REQUEST_SUCCESS: {
-            console.log('GET_PHOTOGALARY reducer data', action.payload.data)
-			const { data } = action.payload;
-			const gallery = data.data.gallery
-			return { ...state, gallery };
+            console.log('GET_PHOTOGALARY reducer data', action.payload.data.gallery)
+			//const { data } = action.payload;
+			//const gallery = data.data.gallery;
+            return { ...state, gallery: action.payload.data.gallery  };
 		}
 		case types.GET_PHOTOGALARY_REQUEST_FAIL: {
 			return state;

src/styles/custom.scss

@@ -28,6 +28,12 @@
         color: $color-white;
         font-size: 5rem;
     }
+
+    @media (max-width: $medium) {
+        h2 {
+            text-align: center;
+        }
+    }
 }
 
 i {