feat: disable org menu when in focus mode on the activity page

This commit is contained in:
swve 2025-04-29 14:44:34 +02:00
parent 46bf3f9c82
commit 59b5ac4793
2 changed files with 46 additions and 1 deletions

View file

@ -161,6 +161,10 @@ function ActivityClient(props: ActivityClientProps) {
React.useEffect(() => { React.useEffect(() => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
localStorage.setItem('globalFocusMode', isFocusMode.toString()); localStorage.setItem('globalFocusMode', isFocusMode.toString());
// Dispatch custom event for focus mode change
window.dispatchEvent(new CustomEvent('focusModeChange', {
detail: { isFocusMode }
}));
isInitialRender.current = false; isInitialRender.current = false;
} }
}, [isFocusMode]); }, [isFocusMode]);

View file

@ -1,5 +1,5 @@
'use client' 'use client'
import React from 'react' import React, { useEffect, useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { Search } from 'lucide-react' import { Search } from 'lucide-react'
import { getUriWithOrg } from '@services/config/config' import { getUriWithOrg } from '@services/config/config'
@ -9,6 +9,7 @@ import { getOrgLogoMediaDirectory } from '@services/media/media'
import { useLHSession } from '@components/Contexts/LHSessionContext' import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext' import { useOrg } from '@components/Contexts/OrgContext'
import { SearchBar } from '@components/Objects/Search/SearchBar' import { SearchBar } from '@components/Objects/Search/SearchBar'
import { usePathname } from 'next/navigation'
export const OrgMenu = (props: any) => { export const OrgMenu = (props: any) => {
const orgslug = props.orgslug const orgslug = props.orgslug
@ -17,6 +18,41 @@ export const OrgMenu = (props: any) => {
const [feedbackModal, setFeedbackModal] = React.useState(false) const [feedbackModal, setFeedbackModal] = React.useState(false)
const org = useOrg() as any; const org = useOrg() as any;
const [isMenuOpen, setIsMenuOpen] = React.useState(false) const [isMenuOpen, setIsMenuOpen] = React.useState(false)
const [isFocusMode, setIsFocusMode] = useState(false)
const pathname = usePathname()
useEffect(() => {
// Only check focus mode if we're in an activity page
if (typeof window !== 'undefined' && pathname?.includes('/activity/')) {
const saved = localStorage.getItem('globalFocusMode');
setIsFocusMode(saved === 'true');
} else {
setIsFocusMode(false);
}
// Add storage event listener for cross-window changes
const handleStorageChange = (e: StorageEvent) => {
if (e.key === 'globalFocusMode' && pathname?.includes('/activity/')) {
setIsFocusMode(e.newValue === 'true');
}
};
// Add custom event listener for same-window changes
const handleFocusModeChange = (e: CustomEvent) => {
if (pathname?.includes('/activity/')) {
setIsFocusMode(e.detail.isFocusMode);
}
};
window.addEventListener('storage', handleStorageChange);
window.addEventListener('focusModeChange', handleFocusModeChange as EventListener);
// Cleanup
return () => {
window.removeEventListener('storage', handleStorageChange);
window.removeEventListener('focusModeChange', handleFocusModeChange as EventListener);
};
}, [pathname]);
function closeFeedbackModal() { function closeFeedbackModal() {
setFeedbackModal(false) setFeedbackModal(false)
@ -26,6 +62,11 @@ export const OrgMenu = (props: any) => {
setIsMenuOpen(!isMenuOpen) setIsMenuOpen(!isMenuOpen)
} }
// Only hide menu if we're in an activity page and focus mode is enabled
if (pathname?.includes('/activity/') && isFocusMode) {
return null;
}
return ( return (
<> <>
<div className="backdrop-blur-lg h-[60px] blur-3xl -z-10"></div> <div className="backdrop-blur-lg h-[60px] blur-3xl -z-10"></div>