logo

src/components/header/Nav.tsx

@@ -1,29 +1,32 @@
 // Modules
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { motion } from 'framer-motion';
-import { Api } from '../../api/Api';
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { Api } from "../../api/Api";
+
+// Images
+import Logo from "../../assets/images/LOGO.png";
 
 // Icons
-import { ReactComponent as Logo } from '../../assets/icons/logo.svg';
-import { ReactComponent as Instagram } from '../../assets/icons/insta-black.svg';
-import { ReactComponent as Facebook } from '../../assets/icons/fb-black.svg';
-import { ReactComponent as TikTok } from '../../assets/icons/tiktok-black.svg';
+// import { ReactComponent as Logo } from "../../assets/icons/logo.svg";
+import { ReactComponent as Instagram } from "../../assets/icons/insta-black.svg";
+import { ReactComponent as Facebook } from "../../assets/icons/fb-black.svg";
+import { ReactComponent as TikTok } from "../../assets/icons/tiktok-black.svg";
 
 // Components
-import Search from './Search';
-import LanguageSelect from './LanguageSelect';
+import Search from "./Search";
+import LanguageSelect from "./LanguageSelect";
 
 // Hooks
-import useMediaQuery from '../../hooks/useMediaQuery';
+import useMediaQuery from "../../hooks/useMediaQuery";
 
 // Animation
-import { searchMobileMotion } from '../../animations/search.animation';
+import { searchMobileMotion } from "../../animations/search.animation";
 
 const Nav = () => {
-  const isSmall = useMediaQuery('(max-width: 850px)');
+  const isSmall = useMediaQuery("(max-width: 850px)");
   const [isInputFocused, setIsInputFocused] = useState<boolean>(false);
-  const language = new Api('').language;
+  const language = new Api("").language;
   return (
     <nav className="nav">
       <div className="container">
@@ -36,39 +39,31 @@ const Nav = () => {
                 setIsInputFocused={setIsInputFocused}
               />
 
-              <LanguageSelect isSmall={isSmall} isInputFocused={isInputFocused} />
+              <LanguageSelect
+                isSmall={isSmall}
+                isInputFocused={isInputFocused}
+              />
             </div>
             <div className="nav-mid">
               <Link to="/">
-                <h1>
-                  {language === 'TM'
-                    ? 'Türkmenistan Habarlar Portaly'
-                    : language === 'RU'
-                    ? 'Туркменистан новостной портал'
-                    : language === 'EN'
-                    ? 'Turkmenistan news portal'
-                    : ''}
-                </h1>
+                <img src={Logo} alt="" />
               </Link>
             </div>
             <div className="nav-right">
               <ul>
                 <li>
-                  <a href="#" target={'_blank'}>
+                  <a href="#" target={"_blank"}>
                     <Instagram />
-                    {/* <span>hhm@inst.com</span> */}
                   </a>
                 </li>
                 <li>
-                  <a href="#" target={'_blank'}>
+                  <a href="#" target={"_blank"}>
                     <Facebook />
-                    {/* <span>hhm@face.com</span> */}
                   </a>
                 </li>
                 <li>
-                  <a href="#" target={'_blank'}>
+                  <a href="#" target={"_blank"}>
                     <TikTok />
-                    {/* <span>@hhm</span> */}
                   </a>
                 </li>
               </ul>
@@ -78,26 +73,22 @@ const Nav = () => {
           <motion.div className="nav-inner mobile">
             <motion.div
               className="nav-mid"
-              initial={isSmall ? 'logoRest' : {}}
-              animate={isSmall ? (isInputFocused ? 'logoActive' : 'logoRest') : {}}
-              variants={searchMobileMotion}>
+              initial={isSmall ? "logoRest" : {}}
+              animate={
+                isSmall ? (isInputFocused ? "logoActive" : "logoRest") : {}
+              }
+              variants={searchMobileMotion}
+            >
               <Link to="/">
-                <h1>
-                  {language === 'TM'
-                    ? 'Türkmenistan Habarlar Portaly'
-                    : language === 'RU'
-                    ? 'Туркменистан новостной портал'
-                    : language === 'EN'
-                    ? 'Turkmenistan news portal'
-                    : ''}
-                </h1>
+                <img src={Logo} alt="" />
               </Link>
             </motion.div>
             <motion.div
               className="search-wrap"
-              initial={isSmall ? 'rest' : {}}
-              animate={isSmall ? (isInputFocused ? 'active' : 'rest') : {}}
-              variants={searchMobileMotion}>
+              initial={isSmall ? "rest" : {}}
+              animate={isSmall ? (isInputFocused ? "active" : "rest") : {}}
+              variants={searchMobileMotion}
+            >
               <Search
                 isSmall={isSmall}
                 isInputFocused={isInputFocused}
@@ -105,7 +96,10 @@ const Nav = () => {
               />
             </motion.div>
             <div className="lang-wrap">
-              <LanguageSelect isSmall={isSmall} isInputFocused={isInputFocused} />
+              <LanguageSelect
+                isSmall={isSmall}
+                isInputFocused={isInputFocused}
+              />
             </div>
           </motion.div>
         )}

src/styles/_nav.scss

@@ -36,17 +36,16 @@
 }
 
 .nav-mid {
+  height: 100%;
   width: 100%;
-  max-width: 70%;
   display: flex;
   justify-self: center;
   justify-content: center;
-  h1 {
-    width: fit-content;
-    text-align: center;
-    color: $main;
-    font-weight: bold;
-    font-size: 1.8rem;
+
+  img {
+    object-fit: cover;
+    height: 8rem;
+    // width: 15rem;
   }
 }