nav dropdown added

src/components/global/Nav.tsx

@@ -1,13 +1,17 @@
 // Modules
 import { Link } from "react-router-dom";
 import { useLocation } from "react-router-dom";
+import { useState } from "react";
 
 // Icons
 import mainLogo from "../../icons/main_logo.svg";
 import arrow from "../../icons/arrow-down-black.svg";
 
 const Nav = () => {
+  // Types
+  type drop = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
   const location = useLocation();
+  const [dropdown, setDropdown]: drop = useState(false);
   return (
     <nav className="nav">
       <div className="container">
@@ -19,11 +23,31 @@ const Nav = () => {
           </div>
           <div className="nav-content">
             <ul className="nav-list">
-              <li className="nav-non-link">
+              <li
+                className="nav-non-link"
+                onClick={() => {
+                  setDropdown((initial) => !initial);
+                }}
+              >
                 <span>О нас</span>
                 <div className="arrow">
                   <img src={arrow} alt="" />
                 </div>
+                <ul
+                  className={
+                    dropdown ? "nav-dropdown" : "nav-dropdown disabled"
+                  }
+                >
+                  <li>
+                    <Link to={"/"}>О федерации</Link>
+                  </li>
+                  <li>
+                    <Link to={"/"}>Структура федерации</Link>
+                  </li>
+                  <li>
+                    <Link to={"/"}>О федерации</Link>
+                  </li>
+                </ul>
               </li>
               <li
                 className={location.pathname.includes("news") ? "active" : ""}

src/styles/_nav.scss

@@ -90,6 +90,8 @@
 }
 
 .nav-non-link {
+  // overflow: hidden;
+  position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -101,3 +103,44 @@
     @include arrow-start;
   }
 }
+
+.nav-dropdown {
+  @include transition-std;
+  height: 17.1rem;
+  overflow: hidden;
+  min-width: 24rem;
+  z-index: 200;
+  display: flex;
+  background: #fff;
+  flex-direction: column;
+  position: absolute;
+  right: -5rem;
+  top: calc(100% + 2rem);
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+
+  &.disabled {
+    height: 0;
+    @include transition-std;
+  }
+
+  li {
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  a {
+    @include transition-std;
+    background: #fff;
+    display: block;
+    padding: 1.6rem 1.9rem;
+    text-align: left;
+
+    &:hover {
+      background: #01815e1a;
+      @include transition-std;
+    }
+  }
+}