nav full adaptive

src/components/global/Burger.tsx

@@ -6,6 +6,9 @@ import { useEffect, useState } from "react";
 
 import { burger } from "../../types/burger";
 
+// Icons
+import arrow from "../../icons/arrow-white-up.svg";
+
 const Burger = ({ burgerOpen, setBurgerOpen }: burger) => {
   const [dropdown, setDropdown] = useState(false);
 
@@ -20,8 +23,32 @@ const Burger = ({ burgerOpen, setBurgerOpen }: burger) => {
     <section className={burgerOpen ? "burger active" : "burger"}>
       <div className="burger-inner">
         <ul>
-          <li>
-            <span>О нас</span>
+          <li
+            className={
+              dropdown ? "burger-list-first active" : "burger-list-first"
+            }
+          >
+            <div
+              className="first-inner"
+              onClick={() => {
+                setDropdown((initial) => !initial);
+              }}
+            >
+              <span>О нас</span>
+              <div
+                className={dropdown ? "burger-arrow active" : "burger-arrow"}
+              >
+                <img src={arrow} alt="" />
+              </div>
+            </div>
+            <ul className="burger-inner-dropdown">
+              <li>
+                <Link to="/about-us">О федерации</Link>
+              </li>
+              <li>
+                <Link to="/structure">Структура федерации</Link>
+              </li>
+            </ul>
           </li>
           <li>
             <Link to={"/events"}>Новости и события</Link>
@@ -37,6 +64,12 @@ const Burger = ({ burgerOpen, setBurgerOpen }: burger) => {
           </li>
         </ul>
       </div>
+      <div
+        className="burger-close-overlay"
+        onClick={() => {
+          setBurgerOpen(false);
+        }}
+      ></div>
     </section>
   );
 };

src/icons/arrow-white-up.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7504 18.0002C23.751 18.2923 23.6493 18.5754 23.4629 18.8002C23.358 18.9268 23.2291 19.0314 23.0837 19.1081C22.9382 19.1848 22.7791 19.2321 22.6154 19.2472C22.4517 19.2623 22.2866 19.2449 22.1296 19.1961C21.9726 19.1473 21.8267 19.068 21.7004 18.9627L15.0004 13.3627L8.28791 18.7627C8.16005 18.8666 8.01293 18.9441 7.85501 18.9909C7.69709 19.0377 7.53147 19.0528 7.36769 19.0354C7.2039 19.018 7.04517 18.9683 6.90063 18.8894C6.75608 18.8104 6.62857 18.7036 6.52541 18.5752C6.41162 18.4459 6.32578 18.2945 6.2733 18.1304C6.22081 17.9663 6.20281 17.7931 6.22041 17.6218C6.23802 17.4504 6.29086 17.2845 6.37561 17.1346C6.46036 16.9846 6.5752 16.8537 6.71291 16.7502L14.2129 10.7127C14.4366 10.5289 14.7171 10.4284 15.0067 10.4284C15.2962 10.4284 15.5767 10.5289 15.8004 10.7127L23.3004 16.9627C23.4517 17.0881 23.5713 17.2474 23.6495 17.4277C23.7276 17.608 23.7622 17.8041 23.7504 18.0002Z" fill="white"/>
+</svg>

src/styles/_burger.scss

@@ -1,4 +1,5 @@
 .burger {
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -20,6 +21,11 @@
     }
   }
 }
+.burger-close-overlay {
+  max-width: 40%;
+  width: 100%;
+  height: 100%;
+}
 
 .burger-inner {
   @include transition-std;
@@ -27,4 +33,108 @@
   width: 100%;
   height: 0%;
   background: $base-green;
+
+  li {
+    a,
+    span {
+      border-top: 0.1rem solid #006a4d;
+      border-bottom: 0.1rem solid #006a4d;
+      color: #fff;
+      font-weight: bold;
+      font-size: 2.4rem;
+      display: block;
+      padding: 2.4rem;
+      @include transition-std;
+      background: $base-green;
+
+      &:hover {
+        background: $hover-green;
+        @include transition-std;
+      }
+    }
+  }
+
+  .burger-list-first {
+    border-bottom: 0.1rem solid #006a4d;
+    border-left: 0.4rem solid #fff;
+    overflow: hidden;
+    @include transition-std;
+    max-height: 8.1rem;
+    height: 100%;
+    &.active {
+      @include transition-std;
+      max-height: 30rem;
+      .burger-inner-dropdown {
+        li {
+          a {
+            padding: 2.4rem 4.8rem;
+            @include transition-std;
+          }
+        }
+      }
+    }
+    .first-inner {
+      padding: 2.4rem;
+
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+      justify-content: space-between;
+      background: $base-green;
+      @include transition-std;
+
+      &:hover {
+        background: $hover-green;
+        @include transition-std;
+      }
+    }
+    span {
+      border: none;
+      background: transparent !important;
+      padding: 0;
+    }
+  }
+}
+
+.burger-arrow {
+  @include transition-std;
+  transform: rotateX(180deg);
+  width: 3rem;
+  height: 3rem;
+
+  img {
+    width: 3rem;
+    height: 3rem;
+    object-fit: contain;
+  }
+
+  &.active {
+    @include transition-std;
+    transform: rotateX(0deg);
+  }
+}
+
+.calendars {
+  display: none !important;
+}
+
+.burger-inner-dropdown {
+  li {
+    a {
+      border: none;
+      padding: 2.4rem 0rem;
+      @include transition-std;
+    }
+  }
+}
+
+// Adaptive
+@media screen and (max-width: 1000px) {
+  .burger-close-overlay {
+    max-width: 20%;
+  }
+  .burger-inner {
+    max-width: 80%;
+  }
 }