iT邦幫忙

2021 iThome 鐵人賽
DAY 6
0
Modern Web

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇)系列 第 6 篇

[Day 6]中秋時在做什麼，有沒有空，可以幫想標題嗎(前端篇)

13th鐵人賽 菜鳥前端 nextjs react tailwindcss
764 瀏覽

  • 分享至 

  • xImage
    •  

今天來實作Navite Camp的Nav，看官們可以點網址去看他的效果，因為沒有時間，滑鼠移動到各tab時下面橘色border會滑順的移動，這個暫時沒時間去實作。
先上成果對照圖
Navite Camp
https://ithelp.ithome.com.tw/upload/images/20210921/20140358UEsUHjcR7n.png

今日實作
https://ithelp.ithome.com.tw/upload/images/20210921/20140358TkBLOgTWdz.png
可以看到這邊有一個Bug需要解決，這邊應該會重新refactor一下架構，開發的太醜了，每一個都直接Ctrl + c，應該要把每個tab給切成componemt在用tab list foreach去呼叫template比較好。

我這邊文字以及border實現hover都很簡單只是切換顏色，但圖片是兩張不同的圖片，我這邊去抓取onMouseEnter,onMouseLeave因為都是複製的區塊，所以一個onMouseEnter就全部都會切換，這邊是明天要來refactor的地方。
這邊使用簡單的isHovering去做判斷滑鼠事件

    const [isHovering, setIsHovered] = useState(false);
    const onMouseEnter = () => setIsHovered(true);
    const onMouseLeave = () => setIsHovered(false);

在li中加入onMouseEnter、onMouseLeave就可以知道是不是hovering

<li
    onMouseEnter={onMouseEnter}
    onMouseLeave={onMouseLeave}>

知道是不是hovering就可以判斷要render哪個Image

{isHovering ? (
     <Image
     src="https://nativecamp.net/user/images/gnavi/ic_home-h.svg"
     layout="fill"
     objectFit="contain"
     />) : (
     <Image
     src="https://nativecamp.net/user/images/gnavi/ic_home.svg"
     layout="fill"
     objectFit="contain"
     />)}

完整code
Nav.js

import React, { useState } from 'react';
import Image from 'next/image';

function Nav() {
    const [isHovering, setIsHovered] = useState(false);
    const onMouseEnter = () => setIsHovered(true);
    const onMouseLeave = () => setIsHovered(false);
    return (
        <div className="">
            <ul className="flex flex-row items-center justify-center pt-2 border-b">
                <li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}>
                    <div className="space-y-2 w-48 flex justify-center items-center flex-col">
                        <div className="relative flex h-[28px] w-[28px]">

                            {isHovering ? (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_home-h.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            ) : (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_home.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            )}
                        </div>
                        <div className="pb-2" >
                            <span className="text-sm">首頁</span>
                        </div>
                    </div>
                </li>
                <li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}>
                    <div className="space-y-2 w-48 flex justify-center items-center flex-col">
                        <div className="relative flex h-[28px] w-[28px] ">

                            {isHovering ? (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_guide-h.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            ) : (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_guide.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            )}
                        </div>
                        <div className="pb-2" >
                            <span className="text-sm">指南</span>
                        </div>
                    </div>
                </li>
                <li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}>
                    <div className="space-y-2 w-48 flex justify-center items-center flex-col">
                        <div className="relative flex h-[28px] w-[28px]">

                            {isHovering ? (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_study-h.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            ) : (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_study.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            )}
                        </div>
                        <div className="pb-2" >
                            <span className="text-sm">學習</span>
                        </div>
                    </div>
                </li>
                <li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}>
                    <div className="space-y-2 w-48 flex justify-center items-center flex-col">
                        <div className="relative flex h-[28px] w-[28px]">

                            {isHovering ? (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_search-h.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            ) : (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_search.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            )}
                        </div>
                        <div className="pb-2" >
                            <span className="text-sm">搜尋・預約講師</span>
                        </div>
                    </div>
                </li>
                <li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}>
                    <div className="space-y-2 w-48 flex justify-center items-center flex-col">
                        <div className="relative flex h-[28px] w-[28px]">

                            {isHovering ? (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_etc-h.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            ) : (
                                <Image
                                    src="https://nativecamp.net/user/images/gnavi/ic_etc.svg"
                                    layout="fill"
                                    objectFit="contain"
                                />
                            )}
                        </div>
                        <div className="pb-2" >
                            <span className="text-sm">其他</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    )
}

export default Nav

後來我認真看之後才發現Nav是跟header再一起的，應該是為了頁面往下滑要做效果變換，所以我就把Nav加在header.js中，

import Image from "next/image";
import Nav from "./Nav";

function Header() {
    return (
        <header >
            <div className="bg-nativeCamp-header-bg h-header flex justify-center items-center">
                <div className="flex items-center">
                    {/* Left */}
                    <div className=" m-auto py-4 pr-80">
                        <div className="relative flex  h-logo cursor-pointer my-auto">
                            <Image
                                src="https://nativecamp.net/user/images/common/logo_s-zh-tw.png?v=2.1"
                                layout="fill"
                                objectFit="contain"
                                objectPosition="left"
                            />
                        </div>
                        <h1 className="text-white text-headerLogo">
                            線上英語會話的NativeCamp.7天免費體驗進行中！
                        </h1>
                    </div>
                    {/* Right */}
                    <div className=" pl-80 mb-4 space-y-2">
                        <ul className="flex justify-end ">
                            <li>
                                <a
                                    className="text-white text-sm  hover:text-opacity-75"
                                    href="https://nativecamp.net/zh-tw/tutors"
                                >
                                    FOR TUTORS
                                </a>
                            </li>
                        </ul>
                        <ul className="flex space-x-2">
                            <li>
                                <a className='bg-nativeCamp-header-signup hover:bg-nativeCamp-header-signupHov text-white text-center text-xs py-2 px-6 rounded-sm  cursor-pointer'>註冊</a>
                            </li>
                            <li>
                                <a className='bg-nativeCamp-header-login hover:bg-nativeCamp-header-loginHov text-white text-center text-xs py-2 px-6 rounded-sm  cursor-pointer'>登入</a>
                            </li>
                            <li>
                                <a className="bg-transparent hover:border-opacity-75 border border-bg-white text-white text-center text-xs p-2 px-4 rounded-sm  cursor-pointer">重新加入</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {/* Nav */}
            <div>
                <Nav />
            </div>
        </header>
    );
}

export default Header;

今天就先實作到這邊，明天再來refactor以及改好hovering的效果顯示。


上一篇
[Day 5]新手村外的首戰是史萊姆應該是定番吧
下一篇
[Day 7]想不到有梗的標題LA(前端篇)
系列文
關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 共 18 篇
  1. 14
    [Day 14]現在真的履歷導向比較好嗎(前端篇)
  2. 15
    [Day 15]吶吶，還有一半別想跑(前端篇)
  3. 16
    [Day 16]新試劑服英戰士(前端篇)
  4. 17
    [Day 17]獨自一人的全端攻略(前端篇)
  5. 18
    [Day 18]所以我說那個醬汁呢(前端篇)
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22207 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙