From 197b620ce9e10c0ae89cf92367d57496672f9bd5 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Tue, 9 Aug 2022 00:55:34 +0500
Subject: [PATCH] footer & nav adaptive

---
 src/App.tsx                      | 17 +++++++++--
 src/components/global/Burger.tsx | 20 +++++++-----
 src/components/global/Footer.tsx | 52 +++++++++++++++-----------------
 src/hooks/useMediaQuery.tsx      |  2 +-
 src/styles/_footer.scss          | 34 +++++++++++++++++++++
 src/styles/_general.scss         |  1 +
 src/styles/_nav.scss             | 14 +++++++++
 src/types/burger.ts              |  7 +++++
 8 files changed, 108 insertions(+), 39 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 42ddaed..75c33b8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,6 +31,7 @@ const App = () => {
   type drop = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 
   // State
+  const [dropdownBurger, setDropdownBurger] = useState(false);
   const [dropdown, setDropdown]: drop = useState(false);
   const [burgerOpen, setBurgerOpen]: drop = useState(false);
   const [eventData, setEventData]: loaderType = useState(null);
@@ -50,7 +51,12 @@ const App = () => {
           burgerOpen={burgerOpen}
           setBurgerOpen={setBurgerOpen}
         />
-        <Burger burgerOpen={burgerOpen} setBurgerOpen={setBurgerOpen} />
+        <Burger
+          burgerOpen={burgerOpen}
+          setBurgerOpen={setBurgerOpen}
+          dropdownBurger={dropdownBurger}
+          setDropdownBurger={setDropdownBurger}
+        />
         <div className="inner-body">
           <Routes>
             <Route path="/" element={<Main />} />
@@ -64,7 +70,14 @@ const App = () => {
             <Route path="/tournaments" element={<Tournaments />} />
           </Routes>
         </div>
-        <Footer dropdown={dropdown} setDropdown={setDropdown} />
+        <Footer
+          burgerOpen={burgerOpen}
+          setBurgerOpen={setBurgerOpen}
+          dropdown={dropdown}
+          setDropdown={setDropdown}
+          dropdownBurger={dropdownBurger}
+          setDropdownBurger={setDropdownBurger}
+        />
       </div>
     </EventContext.Provider>
   );
diff --git a/src/components/global/Burger.tsx b/src/components/global/Burger.tsx
index 3069040..7ff4e93 100644
--- a/src/components/global/Burger.tsx
+++ b/src/components/global/Burger.tsx
@@ -3,15 +3,17 @@ import { Link } from "react-router-dom";
 import { useEffect, useState } from "react";
 
 // Types
-
-import { burger } from "../../types/burger";
+import { burgerProps } from "../../types/burger";
 
 // Icons
 import arrow from "../../icons/arrow-white-up.svg";
 
-const Burger = ({ burgerOpen, setBurgerOpen }: burger) => {
-  const [dropdown, setDropdown] = useState(false);
-
+const Burger = ({
+  burgerOpen,
+  setBurgerOpen,
+  dropdownBurger,
+  setDropdownBurger,
+}: burgerProps) => {
   useEffect(() => {
     if (burgerOpen) {
       document.body.style.overflow = "hidden";
@@ -25,18 +27,20 @@ const Burger = ({ burgerOpen, setBurgerOpen }: burger) => {
         <ul>
           <li
             className={
-              dropdown ? "burger-list-first active" : "burger-list-first"
+              dropdownBurger ? "burger-list-first active" : "burger-list-first"
             }
           >
             <div
               className="first-inner"
               onClick={() => {
-                setDropdown((initial) => !initial);
+                setDropdownBurger((initial) => !initial);
               }}
             >
               <span>О нас</span>
               <div
-                className={dropdown ? "burger-arrow active" : "burger-arrow"}
+                className={
+                  dropdownBurger ? "burger-arrow active" : "burger-arrow"
+                }
               >
                 <img src={arrow} alt="" />
               </div>
diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
index 9d0dfe1..925f75d 100644
--- a/src/components/global/Footer.tsx
+++ b/src/components/global/Footer.tsx
@@ -1,19 +1,29 @@
 // Modules
+import { useEffect } from "react";
 import { Link } from "react-router-dom";
 
 // Icons
-import youtube from "../../icons/youtube.svg";
 import vk from "../../icons/vk.svg";
-import twitter from "../../icons/twitter.svg";
-import classmates from "../../icons/odnoklassniki.svg";
-import linkedin from "../../icons/linkedin.svg";
 import instagram from "../../icons/instagram.svg";
 import facebook from "../../icons/facebook.svg";
 
 // Types
-import { dropdown } from "../../types/dropdown";
+import { footerProps } from "../../types/burger";
+
+// Hooks
+import useMediaQuery from "../../hooks/useMediaQuery";
+
+const Footer = ({
+  setDropdown,
+  setDropdownBurger,
+  setBurgerOpen,
+}: footerProps) => {
+  const breakpoint: Record<number, boolean> = {
+    1300: useMediaQuery("(max-width: 1300px)"),
+  };
+
+  useEffect(() => console.log(breakpoint["1300"]), [breakpoint]);
 
-const Footer = ({ dropdown, setDropdown }: dropdown) => {
   return (
     <footer className="footer">
       <div className="footer-top">
@@ -22,8 +32,14 @@ const Footer = ({ dropdown, setDropdown }: dropdown) => {
             <ul>
               <li
                 onClick={() => {
-                  window.scrollTo(0, 0);
-                  setDropdown(true);
+                  if (breakpoint["1300"]) {
+                    window.scrollTo(0, 0);
+                    setBurgerOpen(true);
+                    setDropdownBurger(true);
+                  } else {
+                    window.scrollTo(0, 0);
+                    setDropdown(true);
+                  }
                 }}
               >
                 <span>О нас</span>
@@ -55,31 +71,11 @@ const Footer = ({ dropdown, setDropdown }: dropdown) => {
             </div>
             <div className="footer-bottom-right">
               <ul>
-                <li>
-                  <a href="/">
-                    <img src={youtube} alt="" />
-                  </a>
-                </li>
                 <li>
                   <a href="/">
                     <img src={vk} alt="" />
                   </a>
                 </li>
-                <li>
-                  <a href="/">
-                    <img src={twitter} alt="" />
-                  </a>
-                </li>
-                <li>
-                  <a href="/">
-                    <img src={classmates} alt="" />
-                  </a>
-                </li>
-                <li>
-                  <a href="/">
-                    <img src={linkedin} alt="" />
-                  </a>
-                </li>
                 <li>
                   <a href="/">
                     <img src={instagram} alt="" />
diff --git a/src/hooks/useMediaQuery.tsx b/src/hooks/useMediaQuery.tsx
index 49cb1e3..4532720 100644
--- a/src/hooks/useMediaQuery.tsx
+++ b/src/hooks/useMediaQuery.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 
 // query e.g.  "(max-width: 1300px)"
 
-const useMediaQuery = (query: string) => {
+const useMediaQuery = (query: string): boolean => {
   const [matches, setMatches] = useState(false);
 
   useEffect(() => {
diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
index 638b14c..8fa61eb 100644
--- a/src/styles/_footer.scss
+++ b/src/styles/_footer.scss
@@ -11,6 +11,7 @@
 
   ul {
     display: flex;
+    justify-content: center;
     gap: 8rem;
     align-items: center;
   }
@@ -55,3 +56,36 @@
     display: block;
   }
 }
+
+// Adaptive
+@media screen and (max-width: 700px) {
+  .footer-bottom-inner {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 4.8rem;
+
+    p {
+      text-align: center;
+    }
+  }
+}
+@media screen and (max-width: 900px) {
+  .footer-top-inner {
+    display: flex;
+    justify-content: center;
+
+    ul {
+      padding-left: 1rem;
+    }
+  }
+  .footer-top {
+    ul {
+      justify-self: center;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      row-gap: 5.6rem;
+      column-gap: 5.6rem;
+    }
+  }
+}
diff --git a/src/styles/_general.scss b/src/styles/_general.scss
index 78b1438..00ad28a 100644
--- a/src/styles/_general.scss
+++ b/src/styles/_general.scss
@@ -5,6 +5,7 @@
 }
 
 .container {
+  width: 100%;
   padding: 0 5rem;
   max-width: 150rem;
   margin: 0 auto;
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index 799a2fd..583c8fa 100644
--- a/src/styles/_nav.scss
+++ b/src/styles/_nav.scss
@@ -220,6 +220,20 @@
 // Adaptive
 
 @media screen and (max-width: 1300px) {
+  .nav {
+    min-height: 9rem;
+  }
+  .nav-logo {
+    a {
+      width: 6.4rem;
+      height: 6.4rem;
+
+      img {
+        width: 6.4rem;
+        height: 6.4rem;
+      }
+    }
+  }
   .nav-content {
     display: flex;
     justify-content: flex-end;
diff --git a/src/types/burger.ts b/src/types/burger.ts
index a74ec29..3045e7c 100644
--- a/src/types/burger.ts
+++ b/src/types/burger.ts
@@ -6,4 +6,11 @@ export interface burger {
   setBurgerOpen: React.Dispatch<boolean | ((initial: boolean) => boolean)>;
 }
 
+export interface dropdownBurger {
+  dropdownBurger: boolean;
+  setDropdownBurger: React.Dispatch<boolean | ((initial: boolean) => boolean)>;
+}
+
 export type navProps = burger & dropdown;
+export type burgerProps = burger & dropdownBurger;
+export type footerProps = dropdownBurger & dropdown & burger;