feat: adding timeout to mobile nav bar notification

apps/forum/src/components/Board.tsx

@@ -28,6 +28,8 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
     boards.find((board) => board.slug === boardSlug)?.slug || ""
   );
 
+  localStorage.setItem("mobileNavCheck", "false");
+
   // Use Effect to set the board state in the parent component for tag filtering
   useEffect(() => {
     setBoard(boardSlug);

apps/root/src/components/frame/MobileNav.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 
 import { getUserAttr, signOut } from "wasedatime-ui"
 import { useTranslation } from "react-i18next"
@@ -19,6 +19,15 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
   const [currentPath, setCurrentPath] = useState(window.location.pathname)
   const notSignedIn = !userAttr
   if (notSignedIn) getUserAttr().then((attr) => setUserAttr(attr))
+  const [showTooltip, setShowTooltip] = useState(true)
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setShowTooltip(false) // Hide tooltip after 3 seconds
+    }, 3000)
+
+    return () => clearTimeout(timeoutId) // Cleanup on unmount
+  }, []) // Run once after the initial render
 
   const styledLinks = navItems.map((item) => (
     <LinkOutsideRouter
@@ -34,7 +43,7 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
         <div className="text-lg text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
           {item.name}
         </div>
-        {item.tooltip && (
+        {item.tooltip && showTooltip && (
           <span className="absolute top-0 left-1/2 z-10 -translate-x-1/2 -translate-y-full transform whitespace-nowrap rounded bg-light-main px-3 py-2 text-lg text-dark-text1 dark:bg-dark-main">
             {item.tooltip}
           </span>