@@ -6,6 +6,7 @@ import { usePathname, useRouter } from 'next/navigation';
66
77import { useContext , useEffect , useState } from 'react' ;
88import { FiMenu } from 'react-icons/fi' ;
9+ import { ImSpinner2 } from 'react-icons/im' ;
910import { IoMdArrowBack , IoMdClose } from 'react-icons/io' ;
1011import { MdHome } from 'react-icons/md' ;
1112
@@ -22,7 +23,7 @@ function Navbar() {
2223 const [ sidebarToggle , setSidebarToggle ] = useState ( false ) ;
2324 const [ isHomePage , setIsHomePage ] = useState ( true ) ;
2425
25- const { isSigningInUser, reload} = useContext ( AppContext )
26+ const { isSigningInUser, reload, alertMessage } = useContext ( AppContext )
2627
2728 // check if the current page is the homepage
2829 useEffect ( ( ) => {
@@ -47,46 +48,58 @@ function Navbar() {
4748
4849 return (
4950 < >
50- < div
51- className = { `w-full h-[76.19px] z-500 px-[16px] py-[5px] bg-primary fixed top-0 left-0 right-0 ` } >
51+ < div className = "w-full h-[76.19px] z-500 px-[16px] py-[5px] bg-primary fixed top-0 left-0 right-0" >
5252 < div className = "text-center text-secondary text-[1.3rem] whitespace-nowrap" >
53- { isSigningInUser || reload ? t ( 'SHARED.LOADING_SCREEN_MESSAGE' ) : "Map of Pi" }
53+ { /* Display alert message with spinner if present, otherwise display 'Map of Pi' */ }
54+ { alertMessage ? (
55+ < div className = "alert-message flex items-center justify-center text-[1rem]" > { /* Adjust font size */ }
56+ < ImSpinner2 className = "animate-spin mr-2 ml-1" /> { /* Spinner Icon */ }
57+ { alertMessage }
58+ </ div >
59+ ) : (
60+ isSigningInUser || reload ? (
61+ < div className = "flex items-center justify-center" >
62+ < ImSpinner2 className = "animate-spin mr-2 ml-1" /> { /* Spinner Icon */ }
63+ { t ( 'SHARED.LOADING_SCREEN_MESSAGE' ) }
64+ </ div >
65+ ) : (
66+ "Map of Pi"
67+ )
68+ ) }
5469 </ div >
55- < div
56- className = "flex justify-between" >
70+ < div className = "flex justify-between" >
5771 < div className = { `${ styles . nav_item } ${ isHomePage && 'disabled' } } >
5872 < Link href = "/" onClick = { handleBackBtn } >
5973 < IoMdArrowBack size = { 26 } className = { `${ isHomePage ? 'text-tertiary' : 'text-secondary' } } />
6074 </ Link >
6175 </ div >
6276
63- < div className = { `${ styles . nav_item } ${ isHomePage && 'disabled' } } >
64- < Link href = "/" >
65- < MdHome size = { 24 } className = { `${ isHomePage ? 'text-tertiary' : 'text-secondary' } } />
66- </ Link >
67- </ div >
77+ < div className = { `${ styles . nav_item } ${ isHomePage && 'disabled' } } >
78+ < Link href = "/" >
79+ < MdHome size = { 24 } className = { `${ isHomePage ? 'text-tertiary' : 'text-secondary' } } />
80+ </ Link >
81+ </ div >
82+
6883 < div className = { `${ styles . nav_item } } >
69- < Link
70- href = ""
71- onClick = { ( e ) => {
72- if ( isSigningInUser ) {
73- e . preventDefault ( ) ;
74- } else {
75- handleMenu ( ) ;
76- }
77- } }
78- >
79- { sidebarToggle && ! isSigningInUser ? (
80- < IoMdClose size = { 24 } className = "text-secondary" />
81- ) : (
82- < FiMenu
83- size = { 24 }
84- className = { `${
85- isSigningInUser ? 'text-tertiary cursor-not-allowed' : 'text-secondary'
86- } `}
87- />
88- ) }
89- </ Link >
84+ < Link
85+ href = ""
86+ onClick = { ( e ) => {
87+ if ( isSigningInUser ) {
88+ e . preventDefault ( ) ;
89+ } else {
90+ handleMenu ( ) ;
91+ }
92+ } }
93+ >
94+ { sidebarToggle && ! isSigningInUser ? (
95+ < IoMdClose size = { 24 } className = "text-secondary" />
96+ ) : (
97+ < FiMenu
98+ size = { 24 }
99+ className = { `${ isSigningInUser ? 'text-tertiary cursor-not-allowed' : 'text-secondary' } }
100+ />
101+ ) }
102+ </ Link >
90103 </ div >
91104 </ div >
92105 </ div >
0 commit comments