added burger menu for mobile

src/components/AppBar/AppBar-styled.jsx

@@ -69,16 +69,61 @@ export const NavWrap = styled.nav`
   gap: 24px;
 `;
 
+export const MobileBackdrop = styled.div`
+  display: none;
+
+  @media screen and (max-width: 576px) {
+    display: ${({ isMobileMenuOpen }) => (isMobileMenuOpen ? "block" : "none")};
+
+    position: fixed;
+    z-index: 999;
+    background-color: transparent;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+  }
+`;
+
 export const NavList = styled.ul`
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
+
+  @media screen and (max-width: 576px) {
+    transform: translateX(100%);
+
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    max-width: 300px;
+
+    padding: 100px 24px;
+
+    flex-direction: column;
+    justify-content: left;
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(10px);
+
+    transition: var(--main-transition);
+
+    transform: ${({ isMobileMenuOpen }) =>
+      isMobileMenuOpen ? "translateX(0%)" : "translateX(100%)"};
+  }
 `;
 
 export const NavItem = styled.li`
   height: 100%;
+
+  @media screen and (max-width: 576px) {
+    width: 100%;
+    height: 50px;
+  }
 `;
 
 export const NavLinkStyled = styled(NavLink)`
@@ -136,10 +181,58 @@ export const NavLinkStyled = styled(NavLink)`
       transform: scaleX(1);
     }
   }
+
+  @media screen and (max-width: 576px) {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    &:not(.logo):after {
+      display: none;
+    }
+
+    &.active {
+      &:not(.logo):after {
+        display: none;
+      }
+    }
+  }
 `;
 
 export const NavIconSvg = styled.svg`
   width: 20px;
   height: 20px;
   fill: currentColor;
 `;
+
+export const MobileMenuButton = styled.button`
+  position: fixed;
+  z-index: 1001;
+  right: 0;
+  top: 0;
+  width: 72px;
+  height: 100px;
+  border: none;
+  background-color: transparent;
+
+  color: var(--primary-white-color);
+
+  transition: var(--main-transition);
+
+  &:hover {
+    color: var(--accent-hover-color);
+  }
+
+  @media screen and (min-width: 576px) {
+    display: none;
+  }
+`;
+
+export const BurgerIconSvg = styled.svg`
+  width: ${({ isMobileMenuOpen }) => (isMobileMenuOpen ? "24px" : "30px")};
+  height: ${({ isMobileMenuOpen }) => (isMobileMenuOpen ? "24px" : "30px")};
+  fill: currentColor;
+
+  /* transition: var(--main-transition); */
+`;

src/components/AppBar/AppBar.jsx

@@ -11,16 +11,32 @@ import {
   NavIconSvg,
   HeaderBlurFilter,
   HeaderBaseBG,
+  MobileBackdrop,
+  MobileMenuButton,
+  BurgerIconSvg,
 } from "./AppBar-styled";
 
 import sprite from "../../sprite.svg";
 
 export const AppBar = () => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
   const [flipped, setFlipped] = useState(false);
   const { transform } = useSpring({
     transform: `perspective(200px) rotateY(${flipped ? 360 : 0}deg)`,
     config: { mass: 10, tension: 200, friction: 40 },
   });
+
+  const closeMobileMenu = () => {
+    document.body.classList.remove("modal-open");
+    setIsMobileMenuOpen(false);
+  };
+
+  const openMobileMenu = () => {
+    document.body.classList.add("modal-open");
+    setIsMobileMenuOpen(true);
+  };
+
   return (
     <>
       <HeaderBaseBG />
@@ -42,9 +58,10 @@ export const AppBar = () => {
               <Logo />
             </NavLinkStyled>
           </a.div>
-          <NavList>
+
+          <NavList isMobileMenuOpen={isMobileMenuOpen}>
             <NavItem>
-              <NavLinkStyled to="/tournaments">
+              <NavLinkStyled to="/tournaments" onClick={closeMobileMenu}>
                 <NavIconSvg>
                   <use href={sprite + "#icon-cup"}></use>
                 </NavIconSvg>
@@ -53,7 +70,7 @@ export const AppBar = () => {
             </NavItem>
 
             <NavItem>
-              <NavLinkStyled to="/members">
+              <NavLinkStyled to="/members" onClick={closeMobileMenu}>
                 <NavIconSvg>
                   <use href={sprite + "#icon-users"}></use>
                 </NavIconSvg>
@@ -62,14 +79,32 @@ export const AppBar = () => {
             </NavItem>
 
             <NavItem>
-              <NavLinkStyled to="/gallery">
+              <NavLinkStyled to="/gallery" onClick={closeMobileMenu}>
                 <NavIconSvg>
                   <use href={sprite + "#icon-camera"}></use>
                 </NavIconSvg>
                 Галерея
               </NavLinkStyled>
             </NavItem>
           </NavList>
+
+          <MobileMenuButton
+            type="button"
+            onClick={isMobileMenuOpen ? closeMobileMenu : openMobileMenu}
+          >
+            <BurgerIconSvg isMobileMenuOpen={isMobileMenuOpen}>
+              <use
+                href={
+                  sprite + (isMobileMenuOpen ? "#icon-close" : "#icon-burger")
+                }
+              ></use>
+            </BurgerIconSvg>
+          </MobileMenuButton>
+
+          <MobileBackdrop
+            isMobileMenuOpen={isMobileMenuOpen}
+            onClick={closeMobileMenu}
+          />
         </NavWrap>
       </Header>
     </>

src/components/LastUpdateSection/LastUpdateSection.jsx

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

src/index.css

@@ -140,14 +140,14 @@ input {
 }
 
 ::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
+  width: 8px;
+  height: 8px;
 }
 
-@media screen and (min-width: 500px) {
+@media screen and (max-width: 576px) {
   ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 0px;
+    height: 0px;
   }
 }