Responsive News Page React Webpage

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  There doesn't seem to be any syntactical or logical errors in this code. However, if performance is a concern, it might be better to optimize the conditional statement in the JSX. Instead of using a ternary operator to check whether to display the hidden navigation, we can use a simple if-else statement:

  import React, { useState } from "react";
  
  const Header = () => {
    const [showNav, setShowNav] = useState(false);
  
    const toggleNav = () => {
      setShowNav(!showNav);
    };
  
    let hiddenNav = null;
    if (showNav) {
        hiddenNav = (
            <div className="hidden-nav">
                <div className="hidden-nav-content">
                    <button onClick={toggleNav}>
                        <img src="/assets/images/icon-menu-close.svg" alt="close"></img>
                    </button>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">New</a></li>
                        <li><a href="#">Popular</a></li>
                        <li><a href="#">Trending</a></li>
                        <li><a href="#">Categories</a></li>
                    </ul>
                </div>
            </div>
        );
    }
  
    return (
      <header>
        <div className="logo">
          <img src="assets/images/logo.svg" alt="logo" />
        </div>
        <nav>
          <ul className="desktop-nav">
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">New</a>
            </li>
            <li>
              <a href="#">Popular</a>
            </li>
            <li>
              <a href="#">Trending</a>
            </li>
            <li>
              <a href="#">Categories</a>
            </li>
          </ul>
          <button onClick={toggleNav}>
            <img src="assets/images/icon-menu.svg" alt="icon" />
          </button>
        </nav>
        {hiddenNav}
      </header>
    );
  };
  
  export default Header;
  

  Anyway, your solution is great. Hope you will find this helpful. Happy coding!

  Marked as helpful

  1

  ---

  

  Mizumura Keiji•130

  @Keiji-MizumuraPosted over 1 year ago

  wow thanks for the feedback! I appreciate it. I didn't know you can do that :D @Trueboss

  0