added accordion to services part

src/App.js

@@ -13,7 +13,7 @@ import Header from "./components/header/index";
 import Main from "./components/main/Main";
 import Doctors from "./components/specialists/Doctors";
 import Services from "./components/services/Services";
-import Categories from "./components/services/categories"
+// import Categories from "./components/services/categories"
 import MoreInfo from "./components/specialists/MoreInfo";
 import Appointment from "./components/appointment/Appointment";
 import Reviews from "./components/Reviews";
@@ -52,7 +52,7 @@ export class App extends React.Component {
                         <Route exact path="/doctors" component={Doctors} />
                         <Route exact path="/services" component={Services} />
                         <Route exact path="/doctors/:doctor" component={MoreInfo} />
-                        <Route exact path="/services/:service" component={Categories} />
+                        {/* <Route exact path="/services/:service" component={Categories} /> */}
                         <Route exact path="/reviews" component={Reviews}/>
                         <Route path="/admin/" component={Admin} />
                         <Route exact path="/appointment/:doctorId" component={Appointment}/>

src/components/services/Services.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Link} from 'react-router-dom';
+// import {Link} from 'react-router-dom';
 import {connect} from 'react-redux';
 
 
@@ -22,13 +22,24 @@ export class Services extends React.Component {
             <div className="main">
                 <div className="wrapper">
                     <div className = "doctors-wrap  services">
-                        <div className = "categories" >
-      
-                            { servArray.map ( (el, index )=> (
-                                <div className="service-type" key = {index}>                           
-                                        <Link to = {`/services/${el[0]}`} className = "categories-link" key = {index}>
-                                            <p>{el[0]}</p>
-                                        </Link>
+                        <div className = "categories" id = "accordion">
+                                 { servArray.map ( (el, index )=> (
+                                <div className="service-type" key = {index} id = {`item${index}`}>                           
+                                        <a href =  {`#item${index}`} className = "categories-link icon-angle-down" key = {index}>
+                                            {el[0]}
+                                        </a>
+                                        {   el[1].map ((item, index) => (
+                                          
+                                          <div className = "servise-name" key = {index} >
+                                              <p>{item.name}</p>
+                                              {/* <p>Длительность: {item.duration} ч.</p>  */}
+                                              <p>Стоимость: {item.price} грн.</p>
+                                              <div>
+                                                  
+                                                  <button className = "btn service-btn"> Записаться </button>
+                                              </div>
+                                          </div>
+                                      ))}
                                 </div>
                             ) ) 
                             }

src/components/services/categories.js

@@ -1,64 +1,64 @@
-import React from 'react';
+// import React from 'react';
 
-// import {Link} from 'react-router-dom';
-import {connect} from 'react-redux';
+// // import {Link} from 'react-router-dom';
+// import {connect} from 'react-redux';
 
 
-export class Services extends React.Component {
+// export class Services extends React.Component {
     
-    render() {
-        const { categories} = this.props;
-        const servArray =  Object.keys(categories).map(key => {
-            return [key, categories[key]];
-        })
-        // const category = servArray.slice (1, 2 )
+//     render() {
+//         const { categories} = this.props;
+//         const servArray =  Object.keys(categories).map(key => {
+//             return [key, categories[key]];
+//         })
+//         // const category = servArray.slice (1, 2 )
 
-        // console.log ("data:", data);
-        // console.log ("categories:", Object.values (categories))
-        console.log ("servArray:", servArray)
-        // console.log ("category:", category)
-        // console.log ("this.props:", this.props.app)
+//         // console.log ("data:", data);
+//         // console.log ("categories:", Object.values (categories))
+//         console.log ("servArray:", servArray)
+//         // console.log ("category:", category)
+//         // console.log ("this.props:", this.props.app)
 
-        return (
-            <div className="main">
-                <div className="wrapper">
-                    <div className = "doctors-wrap">
-                        {  servArray.map (( el, index )=> (
-                            <div className = "serv-wrap" key = {index}>
-                                {   el[1].map ((item, index) => (
+//         return (
+//             <div className="main">
+//                 <div className="wrapper">
+//                     <div className = "doctors-wrap">
+//                         {  servArray.map (( el, index )=> (
+//                             <div className = "serv-wrap" key = {index}>
+//                                 {   el[1].map ((item, index) => (
                                           
-                                    <div className = "servise-name" key = {index} >
-                                        <p>{item.name}</p>
-                                        <p>Длительность: {item.duration} ч.</p> 
-                                        <p>Цена: {item.price} грн.</p>
-                                        <div>
+//                                     <div className = "servise-name" key = {index} >
+//                                         <p>{item.name}</p>
+//                                         <p>Длительность: {item.duration} ч.</p> 
+//                                         <p>Цена: {item.price} грн.</p>
+//                                         <div>
                                             
-                                            <button className = "btn service-btn"> Записаться на приём </button>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        ))
-                        }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
+//                                             <button className = "btn service-btn"> Записаться на приём </button>
+//                                         </div>
+//                                     </div>
+//                                 ))}
+//                             </div>
+//                         ))
+//                         }
+//                     </div>
+//                 </div>
+//             </div>
+//         );
+//     }
+// }
 
-const mapStateToProps = state => {
-    return {
-        app:state.app,
-        // data:state.app.services,
-        categories:state.app.servicesArray
-    }
-};
+// const mapStateToProps = state => {
+//     return {
+//         app:state.app,
+//         // data:state.app.services,
+//         categories:state.app.servicesArray
+//     }
+// };
 
-const mapDispatchToProps = {
+// const mapDispatchToProps = {
 
-};
+// };
 
-export default connect (mapStateToProps,mapDispatchToProps)(Services)
+// export default connect (mapStateToProps,mapDispatchToProps)(Services)
 
 

src/reducers/reducers.js

@@ -7,11 +7,11 @@ const defaultState = {
     doctors:[],
     services:[],
     servicesArray:{
-        surgeon:[],
+        surgery:[],
         kids:[],
-        orthodontist:[],
-        therapist:[],
-        implantologist: [],
+        orthodontics:[],
+        therapy:[],
+        implantology: [],
         endodontics:[]
     },
 
@@ -253,7 +253,7 @@ export const appReducer = (state = defaultState,action) => {
                                 ...state,
                                 servicesArray:{
                                     ...state.servicesArray,
-                                    orthodontist:state.servicesArray.orthodontist.push(el)
+                                    orthodontics:state.servicesArray.orthodontics.push(el)
                                 }
                             }
                         }
@@ -271,7 +271,7 @@ export const appReducer = (state = defaultState,action) => {
                                 ...state,
                                 servicesArray:{
                                     ...state.servicesArray,
-                                    implantologist:state.servicesArray.implantologist.push(el)
+                                    implantology:state.servicesArray.implantology.push(el)
                                 }
                             }
                         }
@@ -280,7 +280,7 @@ export const appReducer = (state = defaultState,action) => {
                                 ...state,
                                 servicesArray:{
                                     ...state.servicesArray,
-                                    implantologist:state.servicesArray.implantologist.push(el)
+                                    implantology:state.servicesArray.implantology.push(el)
                                 }
                             }
                         }
@@ -289,7 +289,7 @@ export const appReducer = (state = defaultState,action) => {
                                 ...state,
                                 servicesArray:{
                                     ...state.servicesArray,
-                                    surgeon:state.servicesArray.surgeon.push(el)
+                                    surgery:state.servicesArray.surgery.push(el)
                                 }
                             }
                         }
@@ -307,7 +307,7 @@ export const appReducer = (state = defaultState,action) => {
                                 ...state,
                                 servicesArray:{
                                     ...state.servicesArray,
-                                    therapist:state.servicesArray.therapist.push(el)
+                                    therapy:state.servicesArray.therapy.push(el)
                                 }
                             }
                         }

src/style/all.scss

@@ -441,6 +441,16 @@ h2 {
 		position: fixed;
 		top: 30%;
 		left: 40%;
+		@media (max-width: 1024px) {
+			left: 35%;
+		}
+		@media (max-width: 768px) {
+			left: 30%;
+		}
+		@media (max-width: 768px) {
+			left: 25%;
+			width: 50%;
+		}
 	}
 
 }
@@ -451,6 +461,9 @@ h2 {
 // _____DOCTORS_____ 
 .doctors-wrap {
 	padding-top: 110px;	
+	@media (max-width: 768px) {
+		padding-top: 65px;
+	}
 	.item h3 {
 		@media (max-width: 375px) {
 			font-size: 1em;
@@ -636,7 +649,10 @@ aside {
 // ______categories _________
 .services {
 	width: 100%;
-	min-height: 97vh;
+	min-height: 100vh;
+	@media (max-width: 414px) {
+		margin: 25px 0;n: 25px 0;
+	}
 	.categories {
 		padding-top: 50px;
 		width: 100%;
@@ -644,13 +660,29 @@ aside {
 		flex-direction: row;
 		justify-content: space-around;	
 		flex-wrap: wrap;
+		align-content: flex-start;
+		@media (max-width: 768px) {
+			padding-top: 5px;
+		}
 		.service-type {
-			width: 35%;
+			width: 85%;
+			// p {
+			// 	@media (max-width: 414px) {
+			// 		margin: 10px 0;
+			// 	}
+			// 	@media (max-width: 414px) {
+			// 		margin: 5px 0;
+			// 	}
+			// 	@media (max-width: 375px) {
+			// 		font-size: 0.8em;
+			// 	}
+			// }
 			.categories-link {
 				display: block;
+				position: relative;
 				border: 1px solid $hover-color;
 				border-radius: 3px;
-				margin: 15px;
+				margin: 25px 15px;
 				padding: 10px;
 				text-decoration: none;
 				text-transform: uppercase;
@@ -658,6 +690,35 @@ aside {
 				letter-spacing: 0.1em;
 				text-align: center;
 				color: $header-color;
+				box-shadow: 0px 0px 10px 0px $hover-color;
+				&:hover {
+					background-color: $main-color;
+				}
+				@media (max-width: 768px) {
+					margin: 15px;
+				}
+				@media (max-width: 414px) {
+					margin: 5px 0;
+				}
+				@media (max-width: 320px) {
+					margin: 5px;
+					padding: 5px 10px;
+				}
+			}
+			@media (max-width: 1024px) {
+				width: 65%;
+				margin-top: 40px;
+			}
+			@media (max-width: 768px) {
+				width: 65%;
+				margin: 10px;
+			}
+			@media (max-width: 414px) {
+				width: 100%;
+				margin: 10px;
+			}
+			@media (max-width: 320px) {
+				margin: 7px;
 			}
 		}
 	}
@@ -669,20 +730,40 @@ aside {
 		width: 100%;
 		display: flex;
 		flex-wrap:wrap;
-		.servise-name {
-			width: 45%;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			align-items: center;
-			border: 1px solid$hover-color;
-			margin: 10px;
-			text-align: center;
-			p {
-				margin: 5px 10px;
-			}
+		justify-content: space-between;
+	}
+	.servise-name {
+		width: 95%;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+		align-content: stretch;
+		align-items: center;
+		border: 1px solid$hover-color;
+		margin: 10px auto;
+		text-align: center;
+		p {
+			flex-basis: 30%;
+			margin: 5px 10px;
+		}
+		@media (max-width: 414px) {
+			width: 100%;
 		}
 	}
 	.service-btn {
 		background-color: $hover-color;
+		width: 100%;
+		margin: 5px;
+	}
+
+	// _______________ACCORDION___________
+	#accordion {
+		.service-type {
+			.servise-name {
+				display: none;
+			}
+			&:target .servise-name {
+				display: flex;
+			}
+		}
 	}