components/header.js
// rendering, and avoids any flash incorrect content on initial page load.
rendering, and avoids any flash incorrect content on initial page load.
rendering and avoids any flash incorrect content on initial page load .
function Header () {
  const [ session, loading ] = useSession()
  const [ toggled, setToggle] = useState(false)
  const router = useRouter()
	{}
  const toggle = () => {
      if(!toggled){
        document.getElementsByTagName('body')[0].className ='toggled'
        document.getElementsByTagName('header')[0].className ='fixNav toggled'
      }else{
        document.getElementsByTagName('body')[0].className ='' 
        document.getElementsByTagName('header')[0].className ='fixNav' 
      }
      setToggle(!toggled)
  }
  return (
    <header className="fixNav">
    <a className="target-burger">
        <ul className="buns" onClick={toggle}>
            <li className="bun"></li>
            <li className="bun"></li>
        </ul>
    </a>
    <div className="inner">
        <a href="" className="logo">
            <Image src={logo} alt="logo"/>
        </a>
        <nav className="main-nav" role="navigation">
            <ul id="globalMu">
                <li><Link href="/#evenInfo">活動說明</Link></li>
                <li><Link href="/#game">開始遊戲</Link></li>
                <li><Link href="/#gift">遊戲獎品</Link></li>
                {
                <li><a target="_blank" href="https://lieyu.kinmen.gov.tw/" rel="noreferrer">烈嶼鄉公所</a></li>
            </ul>
            <div className="otherLink">
                <ul>
                {(!session || session.isAdmin) &&
                <>
                    <li>
                        {}
                            {}
                            <Button style={{ margin: 10, borderRadius:180}} onClick={(e) => {
                              e.preventDefault()
                              signIn()
                            }}>登入</Button>
                        {}
                    </li>
                </>}
                {session && <>
                    <li>
                        <a href=""
                            className={styles.button}
                            onClick={(e) => {
                              e.preventDefault()
                              router.push("/userProfile")
                            }}>
                        {session.user.image && <span style={{backgroundImage: `url(${session.user.image})` }} className={styles.avatar}/>}
                        </a>
                    </li>
                </>}
                </ul>
            </div>
        </nav>
    </div>
</header>
  )
}
function Header ( ) { const [ session , loading ] = useSession ( ) const [ toggled , setToggle ] = useState ( false ) const router = useRouter ( ) { } const toggle = ( ) => { if ( ! toggled ) { document . getElementsByTagName ( 'body' ) [ 0 ] . className = 'toggled' document . getElementsByTagName ( 'header' ) [ 0 ] . className = 'fixNav toggled' } else { document . getElementsByTagName ( 'body' ) [ 0 ] . className = '' document . getElementsByTagName ( 'header' ) [ 0 ] . className = 'fixNav' } setToggle ( ! toggled ) } return ( < header className = "fixNav" > < a className = "target-burger" > < ul className = "buns" onClick = { toggle } > < li className = "bun" > < / li > < li className = "bun" > < / li > < / ul > < / a > < div className = "inner" > < a href = "" className = "logo" > < Image src = { logo } alt = "logo" / > < / a > < nav className = "main-nav" role = "navigation" > < ul id = "globalMu" > < li > < Link href = "/#evenInfo" > 活動說明</Link>< / l i> < li > < Link href = "/#game" > 開始遊戲</Link>< / l i> < li > < Link href = "/#gift" > 遊戲獎品</Link>< / l i> { < li > < a target = "_blank" href = "https://lieyu.kinmen.gov.tw/" rel = "noreferrer" > 烈嶼鄉公所</a></li> < / ul > < div className = "otherLink" > < ul > { ( ! session || session . isAdmin ) && < > < li > { } { } < Button style = { { margin : 10 , borderRadius : 180 } } onClick = { ( e ) => { e . preventDefault ( ) signIn ( ) } } > 登入</Bu t t on> { } < / li > < / > } { session && < > < li > < a href = "" className = { styles . button } onClick = { ( e ) => { e . preventDefault ( ) router . push ( "/userProfile" ) } } > { session . user . image && < span style = { { backgroundImage : ` ${ session . user . image } ` } } className = { styles . avatar } / > } < / a > < / li > < / > } < / ul > < / div > < / nav > < / div > < / header > ) }
rendering, and avoids any flash incorrect content on initial page load.
rendering and avoids any flash incorrect content on initial page load .
/*   useEffect(()=>{
     if(session){
         if(!session.reg){
             router.push("/register")
         }
     }
   },[session])*/ /* <li><Link href="/auth/lottery">會員摸彩</Link></li> */} /* <a href={`/api/auth/signin`}
                            onClick={(e) => {
                              e.preventDefault()
                              signIn()
                            }}> */ /* <Image src={fbLogo} alt="fbLogo" /> */ /* </a> */