new memner + mobile menu

M-Farmaha · Jul 18, 2024 · ed9cc8e · ed9cc8e
1 parent aabbf90
commit ed9cc8e
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 10 deletions.
diff --git a/src/Api/members.json b/src/Api/members.json
@@ -1506,5 +1506,18 @@
     "forhand": "Справа",
     "backhand": "Дворучний",
     "joinTennisYear": 2023
+  },
+  {
+    "id": "117",
+    "name": "Саламаха Ірина",
+    "birthDate": "1975-02-14",
+    "avatar": "https://raw.githubusercontent.com/M-Farmaha/100-club/main/src/components/MembersList/avatars/117.jpg",
+    "sex": "female",
+    "hometown": "Львів",
+    "type": "Аматор",
+    "category": null,
+    "forhand": "Справа",
+    "backhand": "Дворучний",
+    "joinTennisYear": 1984
   }
 ]
diff --git a/src/components/AppBar/AppBar-styled.jsx b/src/components/AppBar/AppBar-styled.jsx
@@ -93,7 +93,6 @@ export const NavList = styled.ul`
   gap: 20px;
 
   @media screen and (max-width: 576px) {
-    transform: translateX(100%);
 
     position: fixed;
     z-index: 1000;
@@ -115,6 +114,10 @@ export const NavList = styled.ul`
     transform: ${({ isMobileMenuOpen }) =>
       isMobileMenuOpen ? "translateX(0%)" : "translateX(100%)"};
   }
+
+  @media screen and (min-width: 577px) {
+
+  }
 `;
 
 export const NavItem = styled.li`
@@ -216,6 +219,10 @@ export const MobileMenuButton = styled.button`
   border: none;
   background-color: transparent;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   color: var(--primary-white-color);
 
   transition: var(--main-transition);
@@ -229,10 +236,20 @@ export const MobileMenuButton = styled.button`
   }
 `;
 
-export const BurgerIconSvg = styled.svg`
-  width: ${({ isMobileMenuOpen }) => (isMobileMenuOpen ? "24px" : "30px")};
-  height: ${({ isMobileMenuOpen }) => (isMobileMenuOpen ? "24px" : "30px")};
-  fill: currentColor;
+// export const BurgerIconSvg = styled.svg`
+//   width: ${({ isMobileMenuOpen }) => (isMobileMenuOpen ? "24px" : "30px")};
+//   height: ${({ isMobileMenuOpen }) => (isMobileMenuOpen ? "24px" : "30px")};
+//   fill: currentColor;
+
+//   transition: var(--main-transition);
+// `;
 
-  /* transition: var(--main-transition); */
+export const BurgerStick = styled.div`
+  position: absolute;
+  width: 30px;
+  height: 4px;
+  background-color: currentColor;
+  border-radius: 30px;
+
+  transition: var(--main-transition);
 `;
diff --git a/src/components/AppBar/AppBar.jsx b/src/components/AppBar/AppBar.jsx
@@ -13,7 +13,7 @@ import {
   HeaderBaseBG,
   MobileBackdrop,
   MobileMenuButton,
-  BurgerIconSvg,
+  BurgerStick,
 } from "./AppBar-styled";
 
 import sprite from "../../sprite.svg";
@@ -92,13 +92,39 @@ export const AppBar = () => {
             type="button"
             onClick={isMobileMenuOpen ? closeMobileMenu : openMobileMenu}
           >
-            <BurgerIconSvg isMobileMenuOpen={isMobileMenuOpen}>
+            {/* <BurgerIconSvg isMobileMenuOpen={isMobileMenuOpen}>
               <use
                 href={
                   sprite + (isMobileMenuOpen ? "#icon-close" : "#icon-burger")
                 }
               ></use>
-            </BurgerIconSvg>
+            </BurgerIconSvg> */}
+
+            <BurgerStick
+              style={{
+                top: "38px",
+                transform: isMobileMenuOpen
+                  ? "rotate(45deg)  translateX(4px) translateY(-4px)"
+                  : null,
+                transformOrigin: "0px 0px",
+              }}
+            />
+
+            <BurgerStick
+              style={{
+                bottom: "38px",
+                transform: isMobileMenuOpen
+                  ? "rotate(45deg) translateX(-4px) translateY(4px)"
+                  : null,
+                transformOrigin: "30px 4px",
+              }}
+            />
+
+            <BurgerStick
+              style={{
+                transform: isMobileMenuOpen ? "rotate(-45deg)" : null,
+              }}
+            />
           </MobileMenuButton>
 
           <MobileBackdrop

diff --git a/src/components/LastUpdateSection/LastUpdateSection.jsx b/src/components/LastUpdateSection/LastUpdateSection.jsx
@@ -11,7 +11,7 @@ export const LastUpdateSection = () => {
               <use href={sprite + "#icon-loop"}></use>
             </IconSvg>
           </IconWrap>
-          Останнє оновлення: 22.06.2024
+          Останнє оновлення: 19.07.2024
         </Text>
       </Section>
     </>

diff --git a/src/components/MembersList/avatars/117.jpg b/src/components/MembersList/avatars/117.jpg