add scroll-bar and some changes

src/components/Admin/ChangeServices-Doctors.js

@@ -52,10 +52,12 @@ export default class ChangeServicesDoctors extends React.Component {
     };
 
     changeId = (e) => {
+        console.log ("data", this.props.data)
         this.props.changeId({
-            item: e,
-            data: this.props.data
+            item: e.target,
+            data: this.props.data,
         })
+        
     };
 
     render() {
@@ -70,7 +72,7 @@ export default class ChangeServicesDoctors extends React.Component {
         } = this.props;
         let doctor = data.find(el => el._id === itemId);
         if (doctor) doctor = doctor.speciality;
-        console.log(data,specialityArray)
+        // console.log(data,specialityArray)
         return (
             <div className="change-services-doctors">
                 {this.state.flag &&

src/components/hooks/select.js

@@ -93,16 +93,20 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 			</div>
 			{show && (
 				<ul className="select__list " ref={list}>
-					{emptyLine && (
-						<li className="select__item" onClick={clickOnEptyLine}>
-							&nbsp;
-						</li>
-					)}
-					{copyOption.map(el => (
-						<li className="select__item" key={el._id} onClick={toggleEvent.bind(null, el.name)}>
-							{el.name}
-						</li>
-					))}
+					<div className="scrollbar" id ="style">
+							<div className="force-overflow"></div>
+						
+						{emptyLine && (
+							<li className="select__item" onClick={clickOnEptyLine}>
+								&nbsp;
+							</li>
+						)}
+						{copyOption.map(el => (
+							<li className="select__item" key={el._id} onClick={toggleEvent.bind(null, el.name)}>
+								{el.name}
+							</li>
+						))}
+					</div>
 				</ul>
 			)}
 		</div>

src/components/services/Services.js

@@ -12,10 +12,12 @@ export class Services extends React.Component {
                     <div className="doctors-wrap  services">
                         <div className="categories" id="accordion">
                             {categories.map(el => (
-                                <div className="service-type" key={el._id} id={`item${el._id}`}>
-                                    <a href={`#item${el._id}`} className="categories-link icon-angle-down" key={el._id}>
-                                        {el.name}
+                                
+                                <div className="service-type" key={el._id} id={`item${el._id}`} >
+                                    <a href={`#item${el._id}`} className="categories-link icon-angle-down" key={el._id} >
+                                         {el.name}
                                     </a>
+
                                     {el.services.map(item => (
                                         <div className="servise-name" key={item._id}>
                                             <p>{item.name}</p>
@@ -28,6 +30,7 @@ export class Services extends React.Component {
                                         </div>
                                     ))}
                                 </div>
+
                             ))}
                         </div>
                     </div>

src/style/all.scss

@@ -319,12 +319,11 @@ aside {
 h2  {
 	background-color: $opacity-color;
 	box-shadow: 0px 0px 15px 15px  $opacity-color;
-	font-size: 20px;
+	font-size: 1.2em;
 	line-height: 1.5em;
 	font-family: 'Montserrat', sans-serif;
 	color: $header-color;
 	text-align: justify;
-	
 	padding: 15px 15px 50px;
 	@media (max-width: 768px) {
 		padding: 3px;
@@ -800,13 +799,13 @@ h2 {
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	@media (max-width: 414px) {
+	@media (max-width: 768px) {
 		justify-content: center;
 	}
 	.admin {
-		width: 30%;	
+		width: 20%;	
 		margin: 3px;
-		@media (max-width: 414px) {
+		@media (max-width: 768px) {
 			width: 80%;	
 			margin: 10px 5px;
 		}
@@ -911,12 +910,13 @@ h2 {
 // ______categories _________
 .services {
 	width: 100%;
+	padding-top: 110px;	
 	min-height: 100vh;
 	@media (max-width: 414px) {
 		margin: 25px 0;
 	}
 	.categories {
-		padding-top: 50px;
+		// padding-top: 50px;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
@@ -933,7 +933,7 @@ h2 {
 				position: relative;
 				border: 1px solid $hover-color;
 				border-radius: 3px;
-				margin: 25px 15px;
+				// margin: 25px 15px;
 				padding: 10px;
 				text-decoration: none;
 				text-transform: uppercase;
@@ -1008,8 +1008,12 @@ h2 {
 	}
 
 	// _______________ACCORDION___________
-	#accordion {
+	#accordion {	
 		.service-type {
+			&:target {
+				padding-top: 110px;				
+			}
+		
 			.servise-name {
 				display: none;
 			}

src/style/select.scss

@@ -7,7 +7,7 @@ $opacity-color: rgba(17,17,17,0.8);
 .select {
 	width: 90%;
 	display: flex;
-	margin: 40px auto 15px;
+	margin: 0px auto 15px;
 	flex-direction: column;
 	position: relative;
 	font-family: 'Lato', sans-serif;
@@ -26,8 +26,11 @@ $opacity-color: rgba(17,17,17,0.8);
 		margin: 0;
 		width: 100%;
 		background-color: $main-color;
-		position: absolute;
-		left: 0;
+		max-height: 50vh;
+		// overflow-y: auto;
+		// overflow: hidden;
+		// position: absolute;
+		// left: 0;
 		top: 100%;
 		z-index: 10;
 	}
@@ -65,4 +68,24 @@ $opacity-color: rgba(17,17,17,0.8);
 			outline: none;
 		}
 	}
-}
+}
+
+
+// ____SCROLL-BAR_____
+.scrollbar {
+	max-height: 50vh;
+	overflow-y: scroll;
+}
+#style::-webkit-scrollbar {
+	width: 12px;
+}
+#style::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color:  $hover-color;
+}
+
+#style::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 10px;
+}