nav, header done

src/assets/icons/arrow-down-black.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00002 11.0895C7.84425 11.0898 7.6933 11.0355 7.57335 10.9362L3.57335 7.60282C3.43721 7.48966 3.35159 7.32705 3.33534 7.15077C3.31909 6.97448 3.37353 6.79896 3.48669 6.66282C3.59985 6.52667 3.76245 6.44106 3.93874 6.4248C4.11502 6.40855 4.29054 6.46299 4.42669 6.57615L8.00002 9.56282L11.5734 6.68282C11.6415 6.62744 11.72 6.58609 11.8042 6.56113C11.8885 6.53618 11.9768 6.52811 12.0641 6.53741C12.1515 6.5467 12.2361 6.57316 12.3132 6.61528C12.3903 6.6574 12.4583 6.71433 12.5134 6.78282C12.5744 6.85136 12.6206 6.93178 12.6492 7.01903C12.6777 7.10628 12.6879 7.19848 12.6791 7.28986C12.6704 7.38123 12.6428 7.46981 12.5983 7.55005C12.5537 7.63029 12.493 7.70045 12.42 7.75615L8.42002 10.9762C8.29663 11.0598 8.14876 11.0997 8.00002 11.0895Z" fill="#272727"/>
+</svg>

src/assets/icons/loop-gray.svg

@@ -0,0 +1,10 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38_3252)">
+<path d="M11.9167 12.8395L10.8334 11.7561M6.22921 12.2978C6.90497 12.2978 7.57411 12.1647 8.19843 11.9061C8.82275 11.6475 9.39003 11.2685 9.86786 10.7906C10.3457 10.3128 10.7247 9.74551 10.9833 9.12119C11.2419 8.49687 11.375 7.82773 11.375 7.15197C11.375 6.47621 11.2419 5.80706 10.9833 5.18274C10.7247 4.55842 10.3457 3.99115 9.86786 3.51331C9.39003 3.03548 8.82275 2.65644 8.19843 2.39784C7.57411 2.13923 6.90497 2.00613 6.22921 2.00613C4.86445 2.00613 3.55558 2.54828 2.59055 3.51331C1.62552 4.47834 1.08337 5.78721 1.08337 7.15197C1.08337 8.51673 1.62552 9.82559 2.59055 10.7906C3.55558 11.7557 4.86445 12.2978 6.22921 12.2978V12.2978Z" stroke="#A6A6A6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_38_3252">
+<rect width="13" height="13" fill="white" transform="translate(0 0.922806)"/>
+</clipPath>
+</defs>
+</svg>

src/components/header/Header.tsx

@@ -1,11 +1,13 @@
 // Components
 import SupHeader from "./SupHeader";
 import Nav from "./Nav";
+import SubHeader from "./SubHeader";
 
 const Header = () => {
   return (
     <div className="header">
       <SupHeader />
+      <SubHeader />
       <Nav />
     </div>
   );

src/components/header/SubHeader.tsx

@@ -0,0 +1,111 @@
+// Modules
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+
+// Images
+import Logo from "../../assets/images/logo.png";
+
+// Icons
+import ArrowDownBlack from "../../assets/icons/arrow-down-black.svg";
+import LoopGray from "../../assets/icons/loop-gray.svg";
+
+const loopMotion = {
+  rest: {
+    opacity: 0,
+    ease: "ease",
+    duration: 0.2,
+    type: "tween",
+  },
+  hover: {
+    opacity: 1,
+    ease: "ease",
+    duration: 0.2,
+    type: "tween",
+  },
+};
+
+const blockMotion = {
+  rest: {
+    opacity: 1,
+    duration: 0.2,
+    type: "tween",
+    x: 0,
+  },
+
+  hover: {
+    y: -10,
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+      type: "spring",
+    },
+  },
+};
+
+const SubHeader = () => {
+  const [isTyping, setIsTyping] = useState(false);
+  return (
+    <div className="subheader">
+      <div className="container">
+        <div className="subheader-inner">
+          <ul className="subheader-left">
+            <li>
+              <div id="time">
+                <span className="time">12:30</span>
+                <span className="date">14 февраля</span>
+              </div>
+            </li>
+            <li>
+              <Link to="/">Туркменистан</Link>
+            </li>
+            <li>
+              <Link to="/">СНГ</Link>
+            </li>
+            <li>
+              <Link to="/">Зарубежье</Link>
+            </li>
+          </ul>
+          <div className="subheader-mid">
+            <img src={Logo} alt="" />
+          </div>
+          <div className="subheader-right">
+            <div className="language-wrapper">
+              <div className="language-trig">
+                <span>EN</span>
+                <div>
+                  <img src={ArrowDownBlack} alt="" />
+                </div>
+              </div>
+            </div>
+            <motion.div className="search-wrapper">
+              <form
+                onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+                  event.preventDefault();
+                }}
+              >
+                <motion.div
+                  initial={"rest"}
+                  animate={isTyping ? blockMotion.hover : blockMotion.rest}
+                >
+                  <img src={LoopGray} alt="" />
+                  <span>Search anything</span>
+                </motion.div>
+                <input
+                  type="text"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    event.target.value.length > 0
+                      ? setIsTyping(true)
+                      : setIsTyping(false);
+                  }}
+                />
+              </form>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubHeader;

src/components/header/SupHeader.tsx

@@ -1,3 +1,6 @@
+// Modules
+import { Link } from "react-router-dom";
+
 // Images
 import Logo from "../../assets/images/sup-header.png";
 
@@ -6,7 +9,9 @@ const SupHeader = () => {
     <div className="supheader">
       <div className="container">
         <div className="supheader-inner">
-          <h1>Halkara Habarlar Merkezi</h1>
+          <h1>
+            <Link to="/">Halkara Habarlar Merkezi</Link>
+          </h1>
           <div className="supheader-logo">
             <img src={Logo} alt="" />
           </div>

src/styles/_header.scss

@@ -12,8 +12,15 @@
   position: relative;
 
   h1 {
+    height: 100%;
+    a {
       font-size: 2rem;
       color: $white;
+      display: block;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
   }
 }
 
@@ -54,3 +61,122 @@
     }
   }
 }
+
+// SUBHEADER
+
+.subheader-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.6rem;
+}
+
+.subheader-left {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  li {
+    a,
+    div {
+      padding: 1.2rem;
+    }
+
+    a {
+      font-size: 1.6rem;
+      color: $black;
+    }
+  }
+}
+
+#time {
+  display: flex;
+  flex-direction: column;
+  .time {
+    font-size: 2.4rem;
+    color: $black;
+    text-align: center;
+  }
+
+  .date {
+    font-size: 1.2rem;
+    color: $black;
+    text-align: center;
+  }
+}
+
+.subheader-mid {
+  width: 10rem;
+  height: 7.2rem;
+}
+
+.subheader-right {
+  min-height: 7.3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4rem;
+}
+
+// LANGUAGE
+.language-wrapper {
+  height: 100%;
+}
+
+.language-trig {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  span {
+    font-size: 1.6rem;
+    color: $black;
+  }
+
+  div {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+}
+
+// SEARCH
+.search-wrapper {
+  form {
+    position: relative;
+    width: 100%;
+    max-width: 32rem;
+    background: transparent;
+    display: block;
+    border: 0.1rem solid $gray;
+    border-radius: 0.5rem;
+    padding: 1rem;
+
+    input {
+      font-size: 1.6rem;
+      color: $black;
+    }
+
+    div {
+      pointer-events: none;
+      display: none;
+      background: transparent;
+      position: absolute;
+      left: 1rem;
+      top: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+
+      img {
+        width: 1.3rem;
+        height: 1.3rem;
+      }
+
+      span {
+        font-size: 1.6rem;
+        color: $gray;
+      }
+    }
+  }
+}