From ffdef22670be628c8e0d4de208b028fee6ae6f93 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Tue, 12 Jul 2022 16:14:08 +0500
Subject: [PATCH] animation + footer-nav merge

---
 src/App.tsx                      | 11 +++++++++--
 src/components/global/Footer.tsx | 14 +++++++++++---
 src/components/global/Nav.tsx    | 19 ++++++++++---------
 src/icons/arrow-down-black.svg   |  4 ++--
 src/styles/_footer.scss          |  4 +++-
 src/styles/_nav.scss             |  9 +++++++++
 src/styles/_nullifier.scss       |  1 +
 src/types/dropdown.ts            |  4 ++++
 8 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 src/types/dropdown.ts

diff --git a/src/App.tsx b/src/App.tsx
index bad76d1..2e95fe7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 // Modules
 import { Routes, Route } from "react-router-dom";
+import { useState } from "react";
 
 // Styles
 import "./styles/style.scss";
@@ -19,9 +20,15 @@ import Contacts from "./pages/Contact";
 import Calendar from "./components/global/Calendar";
 
 const App = () => {
+  // Types
+  type drop = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+
+  // State
+  const [dropdown, setDropdown]: drop = useState(false);
+
   return (
     <div className="App">
-      <Nav />
+      <Nav dropdown={dropdown} setDropdown={setDropdown} />
       <div className="inner-body">
         <Routes>
           <Route path="/" element={<Main />} />
@@ -34,7 +41,7 @@ const App = () => {
           <Route path="/calendar" element={<Calendar />} />
         </Routes>
       </div>
-      <Footer />
+      <Footer dropdown={dropdown} setDropdown={setDropdown} />
     </div>
   );
 };
diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
index 7f76658..cf7f101 100644
--- a/src/components/global/Footer.tsx
+++ b/src/components/global/Footer.tsx
@@ -10,15 +10,23 @@ import linkedin from "../../icons/linkedin.svg";
 import instagram from "../../icons/instagram.svg";
 import facebook from "../../icons/facebook.svg";
 
-const Footer = () => {
+// Types
+import { dropdown } from "../../types/dropdown";
+
+const Footer = ({ dropdown, setDropdown }: dropdown) => {
   return (
     <footer className="footer">
       <div className="footer-top">
         <div className="container">
           <div className="footer-top-inner">
             <ul>
-              <li>
-                <Link to={"/"}>О нас</Link>
+              <li
+                onClick={() => {
+                  window.scrollTo(0, 0);
+                  setDropdown(true);
+                }}
+              >
+                <span>О нас</span>
               </li>
               <li>
                 <Link to={"/"}>События</Link>
diff --git a/src/components/global/Nav.tsx b/src/components/global/Nav.tsx
index 28fb2ec..2ea0b48 100644
--- a/src/components/global/Nav.tsx
+++ b/src/components/global/Nav.tsx
@@ -1,17 +1,18 @@
 // 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";
+// import arrow from "../../icons/arrow-down-black.svg";
+import { ReactComponent as Arrow } from "../../icons/arrow-down-black.svg";
 
-const Nav = () => {
-  // Types
-  type drop = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+// Types
+import { dropdown } from "../../types/dropdown";
+
+const Nav = ({ dropdown, setDropdown }: dropdown) => {
   const location = useLocation();
-  const [dropdown, setDropdown]: drop = useState(false);
+
   return (
     <nav className="nav">
       <div className="container">
@@ -29,9 +30,9 @@ const Nav = () => {
                   setDropdown((initial) => !initial);
                 }}
               >
-                <span>О нас</span>
-                <div className="arrow">
-                  <img src={arrow} alt="" />
+                <span className={dropdown ? "active" : ""}>О нас</span>
+                <div className={dropdown ? "arrow active" : "arrow"}>
+                  <Arrow className="arrow" />
                 </div>
                 <ul
                   className={
diff --git a/src/icons/arrow-down-black.svg b/src/icons/arrow-down-black.svg
index ee690ab..1e4d631 100644
--- a/src/icons/arrow-down-black.svg
+++ b/src/icons/arrow-down-black.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.16639 8.83333C4.16601 8.63862 4.23382 8.44993 4.35806 8.3C4.42801 8.21562 4.51393 8.14587 4.61089 8.09474C4.70784 8.04361 4.81393 8.01212 4.92308 8.00205C5.03223 7.99199 5.14229 8.00356 5.24696 8.0361C5.35163 8.06863 5.44885 8.1215 5.53306 8.19167L9.99972 11.925L14.4747 8.325C14.56 8.25578 14.658 8.20409 14.7633 8.17289C14.8686 8.1417 14.979 8.13162 15.0882 8.14324C15.1974 8.15485 15.3032 8.18794 15.3996 8.24058C15.4959 8.29323 15.581 8.3644 15.6497 8.45C15.7256 8.53622 15.7828 8.6372 15.8178 8.74658C15.8528 8.85597 15.8648 8.9714 15.8531 9.08565C15.8413 9.19989 15.8061 9.31048 15.7496 9.41046C15.6931 9.51045 15.6165 9.59767 15.5247 9.66667L10.5247 13.6917C10.3756 13.8142 10.1886 13.8812 9.99556 13.8812C9.80254 13.8812 9.6155 13.8142 9.46639 13.6917L4.46639 9.525C4.36554 9.4414 4.28582 9.33521 4.2337 9.21503C4.18157 9.09486 4.15851 8.96409 4.16639 8.83333Z" fill="#1C1717"/>
+<svg width="20" height="21" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.16639 8.83333C4.16601 8.63862 4.23382 8.44993 4.35806 8.3C4.42801 8.21562 4.51393 8.14587 4.61089 8.09474C4.70784 8.04361 4.81393 8.01212 4.92308 8.00205C5.03223 7.99199 5.14229 8.00356 5.24696 8.0361C5.35163 8.06863 5.44885 8.1215 5.53306 8.19167L9.99972 11.925L14.4747 8.325C14.56 8.25578 14.658 8.20409 14.7633 8.17289C14.8686 8.1417 14.979 8.13162 15.0882 8.14324C15.1974 8.15485 15.3032 8.18794 15.3996 8.24058C15.4959 8.29323 15.581 8.3644 15.6497 8.45C15.7256 8.53622 15.7828 8.6372 15.8178 8.74658C15.8528 8.85597 15.8648 8.9714 15.8531 9.08565C15.8413 9.19989 15.8061 9.31048 15.7496 9.41046C15.6931 9.51045 15.6165 9.59767 15.5247 9.66667L10.5247 13.6917C10.3756 13.8142 10.1886 13.8812 9.99556 13.8812C9.80254 13.8812 9.6155 13.8142 9.46639 13.6917L4.46639 9.525C4.36554 9.4414 4.28582 9.33521 4.2337 9.21503C4.18157 9.09486 4.15851 8.96409 4.16639 8.83333Z"/>
 </svg>
diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
index 086c8af..638b14c 100644
--- a/src/styles/_footer.scss
+++ b/src/styles/_footer.scss
@@ -15,7 +15,9 @@
     align-items: center;
   }
 
-  a {
+  a,
+  span {
+    cursor: pointer;
     font-size: 1.8rem;
     color: #fff;
   }
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index a81dc7e..4c637ea 100644
--- a/src/styles/_nav.scss
+++ b/src/styles/_nav.scss
@@ -27,6 +27,9 @@
     font-size: 1.8rem;
     @include transition-std;
     color: #000;
+    &.active {
+      color: $base-green;
+    }
   }
 
   li {
@@ -98,9 +101,15 @@
   gap: 1rem;
 
   .arrow {
+    // fill: black;
     width: 2rem;
     height: 2rem;
     @include arrow-start;
+
+    &.active {
+      fill: $base-green;
+      @include arrow-end;
+    }
   }
 }
 
diff --git a/src/styles/_nullifier.scss b/src/styles/_nullifier.scss
index f35d486..af919f9 100644
--- a/src/styles/_nullifier.scss
+++ b/src/styles/_nullifier.scss
@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 html {
diff --git a/src/types/dropdown.ts b/src/types/dropdown.ts
new file mode 100644
index 0000000..6c02080
--- /dev/null
+++ b/src/types/dropdown.ts
@@ -0,0 +1,4 @@
+export interface dropdown {
+  dropdown: boolean;
+  setDropdown: React.Dispatch<React.SetStateAction<boolean>>;
+}