animation + footer-nav merge

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>
   );
 };

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>

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={

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>

src/styles/_footer.scss

@@ -15,7 +15,9 @@
     align-items: center;
   }
 
-  a {
+  a,
+  span {
+    cursor: pointer;
     font-size: 1.8rem;
     color: #fff;
   }

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;
+    }
   }
 }
 

src/styles/_nullifier.scss

@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 html {

src/types/dropdown.ts

@@ -0,0 +1,4 @@
+export interface dropdown {
+  dropdown: boolean;
+  setDropdown: React.Dispatch<React.SetStateAction<boolean>>;
+}