11import Link from "next/link" ;
22import { useRouter } from "next/router" ;
33import { CirclesFour , CirclesThreePlus , X } from "phosphor-react" ;
4- import { useState } from "react" ;
5- import Modal from "./modal" ;
4+ import { Dispatch , SetStateAction , useState } from "react" ;
65import ToggleThemeBtn from "./toggle-dark-theme-btn" ;
76
8- export default function NavBar ( ) {
7+ type useEffectProps = {
8+ isOpenedModal : boolean
9+ setIsOpenedModal : Dispatch < SetStateAction < boolean > >
10+ }
11+
12+ export default function NavBar ( { isOpenedModal, setIsOpenedModal } : useEffectProps ) {
913 const router = useRouter ( ) ;
10- const [ isOpenedModal , setIsOpenedModal ] = useState ( false ) ;
1114 const [ effect , setEffect ] = useState ( false ) ;
1215
1316 function changeCurrentStateModal ( ) {
1417 setIsOpenedModal ( ! isOpenedModal ) ;
1518 }
1619
17- return (
18- < nav className = "h-auto w-full pt-4 text-base flex justify-between items-center px-8 md:px-0 md:justify-around md:h-16 absolute top-0" >
19- < Link href = "/" >
20- < div className = "w-10 h-10 md:w-12 md:h-12 rounded-full ring-4 ring-violet-700/5 shadow-sm shadow-violet-700/10 bakcdrop-blur relative select-none" >
21- < img className = "object-cove rounded-full" src = "/images/My.png" alt = "Althor image" />
22- </ div >
23- </ Link >
24-
25- < div className = "flex justify-center items-center" >
26- < ul className = "hidden sm:flex justify-stretch items-cente gap-x-3" >
27- < li className = { `${ router . pathname == "/" ? "text-zinc-900/90 font-semibold" : "text-base" } } >
28- < Link href = "/" > Home</ Link >
29- </ li >
30- < li className = { `${ router . pathname == "/about" ? "text-zinc-900/90 font-semibold" : "text-base" } } >
31- < Link href = "/about" > About</ Link >
32- </ li >
33- < li className = { `${ router . pathname == "/projects" ? "text-zinc-900/90 font-semibold" : "text-base" } } >
34- < Link href = "/projects" > Projects</ Link >
35- </ li >
36- < li className = { `${ router . pathname == "/contact" ? "text-zinc-900/90 font-semibold" : "text-base" } } >
37- < Link href = "/contact" > Contact</ Link >
38- </ li >
39- </ ul >
40-
41- < hr className = "hidden sm:block w-0.5 h-5 bg-separator/80 dark:bg-white/25 mx-5 md:mx-7 shadow-md rounded-full" />
42-
43- < button
44- className = { `relative z-50 text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 transition ${ effect && "animate-effect" } }
45- onClick = { ( ) => {
46- setEffect ( true ) ;
47- changeCurrentStateModal ( ) ;
48- } }
49- onAnimationEnd = { ( ) => setEffect ( false ) }
50- >
51- {
52- effect ? < CirclesFour size = { 25 } /> : ( isOpenedModal ? < X size = { 25 } /> : < CirclesThreePlus size = { 25 } /> )
53- }
54- </ button >
55-
56- < ToggleThemeBtn />
57- </ div >
58-
59- { isOpenedModal && < Modal /> }
20+ return (
21+ < nav className = "flex justify-center items-center" >
22+ < ul className = "hidden sm:flex justify-stretch items-cente gap-x-3" >
23+ < li className = { `${ router . pathname == "/" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold" } } >
24+ < Link href = "/" > Home</ Link >
25+ </ li >
26+ < li className = { `${ router . pathname == "/about" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold" } } >
27+ < Link href = "/about" > About</ Link >
28+ </ li >
29+ < li className = { `${ router . pathname == "/projects" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold" } } >
30+ < Link href = "/projects" > Projects</ Link >
31+ </ li >
32+ < li className = { `${ router . pathname == "/contact" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold" } } >
33+ < Link href = "/contact" > Contact</ Link >
34+ </ li >
35+ </ ul >
36+
37+ < hr className = "hidden sm:block w-0.5 h-5 bg-separator/80 dark:bg-white/25 mx-5 md:mx-7 shadow-md rounded-full" />
38+
39+ < button
40+ className = { `relative z-50 text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 ${ effect && "animate-effect" } }
41+ onClick = { ( ) => {
42+ setEffect ( true ) ;
43+ changeCurrentStateModal ( ) ;
44+ } }
45+ onAnimationEnd = { ( ) => setEffect ( false ) }
46+ >
47+ {
48+ effect ? < CirclesFour size = { 25 } /> : ( isOpenedModal ? < X size = { 25 } /> : < CirclesThreePlus size = { 25 } /> )
49+ }
50+ </ button >
51+
52+ < ToggleThemeBtn />
6053 </ nav >
6154 )
6255}
0 commit comments