Sid Gifari File Manager Pro v10.0.3

✏️ Editing: TopBar.jsx Writable

import React, { useState } from 'react';
import './TopBar.css';

// React component returns JSX kind of markup
function TopBar({ scrollTop }) { // console.log("window.innerWidth: ", window.innerWidth);
  const [search, setSearch] = useState(false);
  const [menuActive, setMenuActive] = useState(false);
  const [showDropdown, setShowDropdown] = useState([]);
  const [isDesktop, setIsDesktop] = useState(window.innerWidth>990);
  window.onresize = () => setIsDesktop(window.innerWidth>990);
  const height = isDesktop?"62px":"72px";
  function searchHandler() { // console.log("searchHandler:", search);
    setSearch(prevSearch => !prevSearch);
  } // console.log('TopBar: scrollTop -', scrollTop);
  const menuClickHandler = () => setMenuActive(prevActive => !prevActive);
  const subMenuHandler = function(i) { console.log("subMenuHandler: i =", i);
    console.log("showDropdown:", showDropdown);
    setShowDropdown(prevValues => {
      const newValues = prevValues.map(v => v);
      // console.log("newValues[i]:", newValues[i], ", !newValues[i]:", !newValues[i]);
      newValues[i] = !newValues[i]; return newValues;
    });
  }
  return (
    <>
      <nav className="topbar-top">
        <ul className="topbar-topmenu">
          <li className="topbar-topitem topbar-sm-hide"><a href="#">downloads</a></li>
          <li className="topbar-topitem"><a href="#">contact us</a></li>
          <li className="topbar-topitem">
            <a href="#" className="highlight">locations</a>
          </li>
          <li className="topbar-topitem topbar-sm-hide">
            <a href="#">complaint cell <img src="/call-icon-ani.gif" alt="complaint-cell" /></a>
          </li>
        </ul>
      </nav>

<div className="topbar-logo">
        <div className="topbar-logo-img"><img src="/logo.png" alt="Logo" /></div>
        <div className="topbar-logo-srch">
          <span onClick={searchHandler}>search <i className="fa-solid fa-magnifying-glass"></i></span>
        </div>
      </div>

<div className="topbar-nav" style={{height: (isDesktop?"auto":"auto")
        , position: (menuActive && !isDesktop?"relative":"sticky")}}>
        <div className="topbar-srch" style={{height: (search?height:"0px"),
          zIndex: (search?15:9), padding: (search?"10px 0":"0px")}}>
          <form className="topbar-srch-frm" action="#" method="GET">
            <div className="topbar-srch1">
              <input className="topbar-srch1-inp" type="text" name="keyword" placeholder="Tell us what you are looking for" />
            </div>
            <div className="topbar-srch2">
              <input className="topbar-srch2-btn" type="submit" value="Search" />
              <span className="topbar-srch2-cls" onClick={searchHandler}>Close</span>
            </div>
          </form>
        </div>
        <div className="topbar-nav1" style={{flex: (scrollTop<98?59+6.5:55+10.5),
          margin: (scrollTop<98?0:"12px 0")}}>
          <ul style={{display: (isDesktop||menuActive?"block":"none")}}>
            <li>
              <a href="#home"><i className="fa-solid fa-house-chimney"></i></a>
            </li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#vision">Vision & Values</a></li>
            <li><a href="#services">Services</a></li>
            <li className={`${showDropdown[0]?"showDropdown":""}`}>
              <a href="#">Technical Expert</a>
              <span onClick={subMenuHandler.bind(this, 0)}>
                <i className="fa-solid fa-chevron-down"></i>
              </span>
              <ul className="topbar-nav1-dropdown">
                <li><a href="#">Agiculture</a></li>
                <li><a href="#">Livestock</a></li>
                <li><a href="#">Cold Storage</a></li>
                <li><a href="#">Food Processing</a></li>
                <li><a href="#">Manufacturing</a></li>
                <li><a href="#">Pharmacy</a></li>
                <li><a href="#">Garments</a></li>
                <li><a href="#">Real Estate</a></li>
                <li><a href="#">Others</a></li>
              </ul>
            </li>
            <li className={`highlight ${showDropdown[1]?"showDropdown":""}`}>
              <a href="#">CMSMEs (Members)</a>
              <span onClick={subMenuHandler.bind(this, 1)}>
                <i className="fa-solid fa-chevron-down"></i>
              </span>
              <ul className="topbar-nav1-dropdown">
                <li><a href="#">Agricultural Farms</a></li>
                <li><a href="#">Grocery Shops</a></li>
                <li><a href="#">Pharmacies</a></li>
                <li><a href="#">Bakeries</a></li>
                <li><a href="#">Department Stores</a></li>
                <li><a href="#">Garment Manufacturers</a></li>
                <li><a href="#">Property Developers</a></li>
                <li><a href="#">Construction Companies</a></li>
                <li><a href="#">Jute Mills</a></li>
                <li><a href="#">Shoe Makers</a></li>
              </ul>
            </li>
            <li className={`imp menu ${showDropdown[2]?"showDropdown":""}`}>
              <a href="#"><img src="logo1.png" /><div className="screen"></div></a>
              <span onClick={subMenuHandler.bind(this, 2)}>
                <i className="fa-solid fa-chevron-down"></i>
              </span>
              <ul className="topbar-nav1-dropdown">
                <li><a href="#">Partners</a></li>
                <li><a href="#">Agents</a></li>
                <li><a href="#">Promotions</a></li>
              </ul>
            </li>
            <li className={`imp logo${scrollTop<98?"":" stk"}`}
              ></li>
          </ul>
          <span className={`topbar-nav1-mobile${menuActive?" active":""}`} onClick={menuClickHandler}>
            Menu <i className="fa-solid fa-chevron-down"></i>
          </span>
        </div>
        <div className={"topbar-nav2 "+(scrollTop<98?"bc":"st")+"kimg"} style={{display: "none",
          flex: (scrollTop<98?6.5:10.5), height: (scrollTop<98?"51px":"75px")}}></div>
        <div className="topbar-nav3"
          style={{display: "none", marginTop: (scrollTop<98?0:"12px")}}></div>
        <div className="topbar-nav4" style={{marginTop: (scrollTop<98?0:"12px"), height:
          (isDesktop?"51px":!(menuActive&&scrollTop>97)?"46.5px":"34.5px")}}></div>
      </div>

{/* <br />
      <div className="topbar-tut">
        <div className="topbar-left">
          <i className="topbar-social-icon fa-brands fa-instagram"></i>
          <i className="topbar-social-icon fa-brands fa-facebook"></i>
          <i className="topbar-social-icon fa-brands fa-linkedin"></i>
          <i className="topbar-social-icon fa-brands fa-twitter"></i>
        </div>
        <div className="topbar-center">
          <ul className="topbar-list">
            <li className="topbar-list-item dropdown">
              <a className="dropdown-btn">HOME</a>
              <ul className="dropdown-content">
                <li><a>Link 1</a></li>
                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
              </ul>
            </li>
            <li className="topbar-list-item dropdown"><a className="dropdown-btn">ABOUT</a></li>
            <li className="topbar-list-item">CONTACT</li>
            <li className="topbar-list-item">CREATE LISTING</li>
            <li className="topbar-list-item">LOGOUT</li>
          </ul>
        </div>
        <div className="topbar-right">
          <img className="topbar-profile-pic" src="https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
          <i className="topbar-search fa-solid fa-magnifying-glass"></i>
        </div>
      </div> */}
    </>
  );
}

export default TopBar;

📁 File Manager Pro

📁 File Manager Pro