r

app/layout.js

@@ -20,6 +20,7 @@ import FireBooksProvider from "@/contexts/fireBooks"
 const inter = Inter({ subsets: ['latin'] })
 import CloudsImg from "../public/images/clouds.jpg"
 import Image from "next/image"
+import NotificationProvider from "@/contexts/notificationContext"
 export const metadata = {
   title: 'HayyimWord',
   description: 'A bible read and study web app.',
@@ -40,7 +41,7 @@ export default function RootLayout({ children }) {
         <IsAUserLoggedInProvider>
           <FireBooksProvider>
 
-
+         <NotificationProvider>        
           <DataProvider>
           <BookProvider>
 
@@ -56,7 +57,7 @@ export default function RootLayout({ children }) {
 
           </BookProvider>
           </DataProvider>
-
+          </NotificationProvider>
           </FireBooksProvider>
         </IsAUserLoggedInProvider>
       </ProviderForTheme>

components/auth/LogOutButton.jsx

@@ -3,11 +3,17 @@ import logOut from '@/firebase/auth/Logout'
 import React from 'react'
 import { useRouter } from 'next/navigation'
 import IconLogout from '../icons/action/logout'
+import { usePathname } from 'next/navigation'
 const LogOutButton = () => {
+  const pathname = usePathname()
         const router = useRouter()
         const handleLogOut = ()=>{
             router.push("/")
             logOut()
+            if (pathname==="/"){
+              window.location.reload(true)
+            }
+
 
         }
   return (

components/display/HighlightHamburger.jsx

@@ -3,12 +3,15 @@ import IconDelete from '../icons/action/delete'
 import IconCrossCircled from '../icons/action/cross'
 import { BookContext } from '@/contexts/books'
 import { doc, runTransaction } from 'firebase/firestore'
-import { firestore } from '@/firebase/firebaseConfig'
+import { auth, firestore } from '@/firebase/firebaseConfig'
 import { IsAUserLoggedInContext } from '@/contexts/authContext'
+import { useNotification } from '@/contexts/notificationContext'
+import NotificationPortal from '../notificationPortal'
 
 const HighlightHamburger = ({handleClose,open,data}) => {
   const {setWordsHighlighted}=useContext(BookContext)
   const {user}=useContext(IsAUserLoggedInContext)
+  const {setNotification,notification}=useNotification()
     function closeMenu(e){
         let highlightMenu = document.querySelector("[data-highlight-menu]")
         let Rect = highlightMenu.getBoundingClientRect()
@@ -30,6 +33,13 @@ const HighlightHamburger = ({handleClose,open,data}) => {
     },[open])
 
     const handleHighlight=async (color) => {
+      console.log("cliekd")
+      if (auth.currentUser===null || auth.currentUser===undefined){
+        setNotification({open:true,message:"Please sign in to highlight",
+      time:3000,type:"alert"
+      })
+        return
+      }
         //🍏run transaction
         let newData = {...data,color:color}
         if (newData.exactId.includes("NaN") || newData.ids.length===0){
@@ -78,7 +88,7 @@ const HighlightHamburger = ({handleClose,open,data}) => {
          onClick={handleClose}
          ><IconCrossCircled/></span>
          </div>
-
+        {notification.open && <NotificationPortal/>}
     </div>
   )
 }

components/display/display.jsx

@@ -556,6 +556,7 @@ const Display = () => {
       Please <Link href={"/login"}>log in</Link> to {alertText}
    </div>
    </Suspense>
+
     </div>
   )
 }

components/notificationPortal.jsx

@@ -0,0 +1,31 @@
+import { useNotification } from '@/contexts/notificationContext'
+import React, { useEffect } from 'react'
+import ReactDom from 'react-dom'
+const NotificationPortal = () => {
+    const {notification,setNotification
+
+    }=useNotification()
+
+
+    useEffect(()=>{
+        setTimeout(()=>{
+            setNotification((prev)=>({...prev,open:false}))
+        },notification?.time)
+    },[])
+  return ReactDom.createPortal(
+    <div 
+    id="highlight__portal"
+    data-theme="dark"
+    className='flex flex-row
+    px-2 py-2 h-min absolute whitespace-nowrap
+    text-base text-[var(--t-2)] w-min
+    bg-[var(--bg-2)] rounded-md 
+    '>
+        {notification?.message}
+
+
+    </div>,document.getElementById("portal")
+  )
+}
+
+export default NotificationPortal

contexts/notificationContext.jsx

@@ -0,0 +1,28 @@
+"use client"
+import React, { createContext, useContext } from 'react'
+
+
+const NotificationContext = createContext({})
+const NotificationProvider = ({children}) => {
+    const [notification,setNotification]=React.useState({open:false,time:3000,message:"",type:""})
+    const NotificationValues = {
+        notification,setNotification
+
+    }
+  return (
+    <NotificationContext.Provider value={NotificationValues}>
+        {children}
+    </NotificationContext.Provider>
+  )
+}
+
+export default NotificationProvider
+
+
+export function useNotification(){
+    const NC = useContext(NotificationContext)
+    if (!NC){
+        throw new Error("NotificationContext must be used inside its provider")
+    }
+    return NC
+}

firebase/firebaseConfig.jsx

@@ -3,6 +3,7 @@ import { initializeApp, getApps } from "firebase/app";
 import {getFirestore} from "@firebase/firestore"
 
 import { getAnalytics } from "firebase/analytics";
+import { getAuth } from "firebase/auth";
 
 const firebaseConfig = {
     apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -19,4 +20,5 @@ let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getA
 //const analytics = getAnalytics(firebase_app);
 export default firebase_app;
 export const firestore = getFirestore(firebase_app)
+export const auth = getAuth(firebase_app)
 

styles/auth.css

@@ -176,3 +176,9 @@
     transform: translate(-50%,0%);
     background-color: var(--bg-1);
 }
+
+#highlight__portal {
+    z-index: 9999;
+    box-sizing: border-box;
+    transform: translate(-50%,0%);
+}

styles/home.css

@@ -548,6 +548,6 @@ body{
 
 .text__title {
     @apply flex flex-row 
-    items-center
+    items-center px-4 underline
     ;
 }