fix: review comments

libs/portals/my-pages/core/src/components/Navigation/Navigation.css.ts

@@ -71,6 +71,9 @@ export const menuBtn = style({
   borderRadius: 8,
   padding: `${theme.spacing['p2']}px ${theme.spacing[2]}px`,
   transition: 'box-shadow .25s, color .25s, background-color .25s',
+  ':focus-visible': {
+    boxShadow: `0 0 0 3px ${theme.color.blue400}`,
+  },
 })
 
 export const listItem = style({

libs/portals/my-pages/core/src/components/Navigation/Navigation.tsx

@@ -5,6 +5,7 @@ import React, {
   ReactNode,
   createContext,
   ReactElement,
+  useRef,
 } from 'react'
 import cn from 'classnames'
 import AnimateHeight from 'react-animate-height'
@@ -434,26 +435,31 @@ const MobileButton = ({
   mobileNavigationButtonOpenLabel,
 }: MobileButtonProps) => {
   const [isShaking, setIsShaking] = useState(false)
-  const time = 60000 // 1 minute
+  const time = 15000 // 15 seconds
+  const idleTimerRef = useRef<NodeJS.Timeout | null>(null)
 
   useEffect(() => {
     const handleIdle = () => {
       setIsShaking(true)
       setTimeout(() => setIsShaking(false), 1000) // Stop shaking after 1 second
     }
 
-    const idleTimer = setTimeout(handleIdle, time)
-
     const resetTimer = () => {
-      clearTimeout(idleTimer)
-      setTimeout(handleIdle, time)
+      if (idleTimerRef.current) {
+        clearTimeout(idleTimerRef.current)
+      }
+      idleTimerRef.current = setTimeout(handleIdle, time)
     }
 
+    resetTimer() // Initialize the timer
+
     window.addEventListener('mousemove', resetTimer)
     window.addEventListener('keydown', resetTimer)
 
     return () => {
-      clearTimeout(idleTimer)
+      if (idleTimerRef.current) {
+        clearTimeout(idleTimerRef.current)
+      }
       window.removeEventListener('mousemove', resetTimer)
       window.removeEventListener('keydown', resetTimer)
     }