ctive devs

src/css/modal-team.css

@@ -55,21 +55,33 @@
 }
 
 .team-item {
+  position: relative;
   border: 1px solid #f4f4f4;
   border-radius: 30px;
   padding: 12px 14px;
   text-align: center;
   gap: 10px;
 }
 
+.more-icon {
+  position: absolute;
+  right: 20px;
+  top: 12px;
+  fill: #f4f4f4;
+}
+
 .team-name {
   color: #f4f4f4;
   font-size: 16px;
   font-weight: 400;
 }
 
 .team-soc-list {
-  margin-top: 15px;
+  display: none;
+}
+
+.active-devel {
+  margin-top: 8px;
   display: flex;
   gap: 10px;
   justify-content: center;
@@ -91,10 +103,6 @@
   fill: #f4f4f4;
 }
 
-.hidden {
-  display: none;
-}
-
 .project-git {
   border: 1px solid #f4f4f4;
   border-radius: 30px;
@@ -107,13 +115,11 @@
   text-align: center;
   gap: 10px;
   margin-top: 20px;
+  color: #242424;
 }
 .project-icon {
   fill: #242424;
 }
-.active-dev {
-  display: flex;
-}
 
 @media screen and (min-width: 768px) {
   .team-modal {

src/js/modal-team.js

@@ -15,15 +15,23 @@ const devSocials = [...teamList.children];
 
 function returnHidden() {
   devSocials.forEach(dev => {
-    dev.lastElementChild.classList.add('hidden');
+    dev.lastElementChild.classList.remove('active-devel');
   });
 }
 
 function onDevClick(e) {
-  const currentActiveDevItem = e.target.closest('.team-item');
-  const currentDevSoc = currentActiveDevItem.querySelector('.team-soc-list');
+  const devClick = e.target.closest('.team-item');
+  if (!devClick) {
+    return;
+  }
+  const devSocClick = devClick.querySelector('.team-soc-list');
 
-  currentDevSoc.classList.remove('hidden');
+  const currentActiveDevSoc = document.querySelector('.active-devel');
+  if (currentActiveDevSoc) {
+    currentActiveDevSoc.classList.remove('active-devel');
+  }
+  //
+  devSocClick.classList.add('active-devel');
 }
 
 function onOpenClick() {

src/js/templates/modal-team-markup.js

@@ -3,8 +3,11 @@ export function createDevMarkup(developers) {
     .map(developer => {
       const { name, linkedin, github } = developer;
       return `<li class="team-item">
+                    <svg class="more-icon" width="20" height="20">
+                <use href="./img/sport-sprite.svg#icon-more"></use>
+              </svg>
         <h3 class="team-name">${name}</h3>
-        <ul class="team-soc-list hidden">
+        <ul class="team-soc-list">
           <li class="team-soc-item">
             <a href="${linkedin}"
               class="team-link" target="_blank" rel="noopener noreferrer" >