開始製作畫面，但在做的過程中還是會碰到一些問題，所以整理出以下幾點今天卡關的地方。

Hover出現下拉選單怎麼做?

最快且直接的方式是下onMouseEnter與onMouseLeave，對於useState去做true/false轉換達到hover效果。以下為今天做出的範例，希望的功能是hover到會員icon的時候會出現下拉選單。

const [memberMenuIsShown, setMemberMenuIsShown] = useState(false);

<div className="container__icon is_member">
      <div className="member " 
          onMouseEnter={() => setMemberMenuIsShown(true)}
          onMouseLeave={() => setMemberMenuIsShown(false)}
          onClick={() => setMemberMenuIsShown((current) => !current)}>
          <a className="icon" href="javascript:;" 
              >
              <img src={icon_member} alt="icon_member"/>
          </a>
          <MemberList/>
      </div>
  </div>

下拉選單需要做判斷

使用者為登入或非登入的狀態影響了前台是要顯示會員中心還是註冊下拉選單，因此做了IsMember與NotMember的小元件，判斷登入狀態後會去顯示相對應的選單。(目前還沒有串到登入註冊那邊，所以先預設isLoggedIn是true)

function IsMember(props) {
    return (
    <ul className={`member_list ${memberMenuIsShown ? "open" : ""}`}>
        <li>
            <a href="member.php">會員專區</a>
        </li>
        <li>
            <a href="javascript:;">登出</a>
        </li>
    </ul>
    )
 }
function NotMember(props) {
    return (
    <ul className={`nonmemember_list ${memberMenuIsShown ? "open" : ""}`}>
        <li>
            <a href="login.php">會員登入</a>
        </li>
        <li>
            <a href="signup.php">註冊</a>
        </li>
    </ul>
    )
 }
function MemberList(props) {
    // const isLoggedIn = props.isLoggedIn;
    const isLoggedIn = true;        
    if (isLoggedIn) {
      return <IsMember />;
    }
    return <NotMember />;
};

完整的header.js在這

import {React,useState,useHover} from 'react'
import { Link, NavLink } from "react-router-dom";
import icon_member from './asset/images/member_icon.png'
import './sassStyles/header.scss';

function Header(){
    const [menuToggle, setMenuToggle] = useState(false)
    const [memberMenuIsShown, setMemberMenuIsShown] = useState(false);
    //是否為會員
    function IsMember(props) {
        return (
        <ul className={`member_list ${memberMenuIsShown ? "open" : ""}`}>
            <li>
                <a href="member.php">會員專區</a>
            </li>
            <li>
                <a href="javascript:;">登出</a>
            </li>
        </ul>
        )
      }
    function NotMember(props) {
        return (
        <ul className={`nonmemember_list ${memberMenuIsShown ? "open" : ""}`}>
            <li>
                <a href="login.php">會員登入</a>
            </li>
            <li>
                <a href="signup.php">註冊</a>
            </li>
        </ul>
        )
      }
    function MemberList(props) {
        // const isLoggedIn = props.isLoggedIn;
        const isLoggedIn = true;        
        if (isLoggedIn) {
          return <IsMember />;
        }
        return <NotMember />;
      };
    return(
        <header className={menuToggle ? 'navbar open' : 'navbar'} >
            <div className="container__logo">
                <Link to="/">   
                    NotAloner
                    {/* <img src="dist/images/logo.png" alt="logo"/> */}
                </Link>
            </div>
            <nav className="container__menu">
                <ul className="menu__wrap">
                    <li className="menu__title">
                        <NavLink to="/partner">找旅伴</NavLink>
                    </li>
                    <li className="menu__title">
                        {/* <NavLink to="/contact">聯絡我們</NavLink> */}
                    </li>
                </ul>
            </nav>
            <div className="container__icon is_member">
                <div className="member " 
                    onMouseEnter={() => setMemberMenuIsShown(true)}
                    onMouseLeave={() => setMemberMenuIsShown(false)}
                    onClick={() => setMemberMenuIsShown((current) => !current)}>
                    <a className="icon" href="javascript:;" 
                        >
                        <img src={icon_member} alt="icon_member"/>
                    </a>
                    <MemberList/>
                </div>
            </div>
            <div className="container__burger" onClick={() => {setMenuToggle((current) => !current);;}}>
                <div className="burger">
                    <span></span>
                </div>
            </div>
        </header>
    )
}

export default Header