diff --git a/client/my-sites/navigation/index.jsx b/client/my-sites/navigation/index.jsx index 28d051dac2c59..f34d973e2760c 100644 --- a/client/my-sites/navigation/index.jsx +++ b/client/my-sites/navigation/index.jsx @@ -4,10 +4,12 @@ import { connect } from 'react-redux'; import AsyncLoad from 'calypso/components/async-load'; import { withCurrentRoute } from 'calypso/components/route'; import GlobalSidebar from 'calypso/layout/global-sidebar'; -import { useGlobalSidebar } from 'calypso/layout/global-sidebar/hooks/use-global-sidebar'; import SitePicker from 'calypso/my-sites/picker'; import MySitesSidebarUnifiedBody from 'calypso/my-sites/sidebar/body'; -import { getSiteOption } from 'calypso/state/sites/selectors'; +import { + getShouldShowGlobalSidebar, + getShouldShowGlobalSiteSidebar, +} from 'calypso/state/global-sidebar/selectors'; import { getSelectedSiteId } from 'calypso/state/ui/selectors'; class MySitesNavigation extends Component { @@ -105,15 +107,15 @@ export default withCurrentRoute( connect( ( state, { currentSection } ) => { const sectionGroup = currentSection?.group ?? null; const siteId = getSelectedSiteId( state ); - const adminInterface = getSiteOption( state, siteId, 'wpcom_admin_interface' ); - const { shouldShowGlobalSidebar, shouldShowGlobalSiteSidebar } = useGlobalSidebar( + const shouldShowGlobalSidebar = getShouldShowGlobalSidebar( state, siteId, sectionGroup ); + const shouldShowGlobalSiteSidebar = getShouldShowGlobalSiteSidebar( + state, siteId, sectionGroup ); return { isGlobalSidebarVisible: shouldShowGlobalSidebar, - // Global Site View should be limited to classic interface users only for now. - isGlobalSiteSidebarVisible: shouldShowGlobalSiteSidebar && adminInterface === 'wp-admin', + isGlobalSiteSidebarVisible: shouldShowGlobalSiteSidebar, }; }, null )( MySitesNavigation ) ); diff --git a/client/my-sites/sidebar/use-site-menu-items.js b/client/my-sites/sidebar/use-site-menu-items.js index 0f2c78366cec7..deff98ea7142c 100644 --- a/client/my-sites/sidebar/use-site-menu-items.js +++ b/client/my-sites/sidebar/use-site-menu-items.js @@ -4,9 +4,12 @@ import { useTranslate } from 'i18n-calypso'; import { useEffect, useMemo } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { useCurrentRoute } from 'calypso/components/route'; -import { useGlobalSidebar } from 'calypso/layout/global-sidebar/hooks/use-global-sidebar'; import domainOnlyFallbackMenu from 'calypso/my-sites/sidebar/static-data/domain-only-fallback-menu'; import { getAdminMenu } from 'calypso/state/admin-menu/selectors'; +import { + getShouldShowGlobalSidebar, + getShouldShowGlobalSiteSidebar, +} from 'calypso/state/global-sidebar/selectors'; import { getPluginOnSite } from 'calypso/state/plugins/installed/selectors'; import { canAnySiteHavePlugins } from 'calypso/state/selectors/can-any-site-have-plugins'; import { canCurrentUser } from 'calypso/state/selectors/can-current-user'; @@ -17,7 +20,6 @@ import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams'; import { getSiteDomain, isJetpackSite } from 'calypso/state/sites/selectors'; import { getSelectedSiteId } from 'calypso/state/ui/selectors'; import { requestAdminMenu } from '../../state/admin-menu/actions'; -import { getSiteOption } from '../../state/sites/selectors'; import allSitesMenu from './static-data/all-sites-menu'; import buildFallbackResponse from './static-data/fallback-menu'; import globalSidebarMenu from './static-data/global-sidebar-menu'; @@ -36,13 +38,12 @@ const useSiteMenuItems = () => { const locale = useLocale(); const isAllDomainsView = '/domains/manage' === currentRoute; const { currentSection } = useCurrentRoute(); - const adminInterface = useSelector( ( state ) => - getSiteOption( state, selectedSiteId, 'wpcom_admin_interface' ) - ); - const { shouldShowGlobalSidebar, shouldShowGlobalSiteSidebar } = useGlobalSidebar( - selectedSiteId, - currentSection?.group - ); + const shouldShowGlobalSidebar = useSelector( ( state ) => { + return getShouldShowGlobalSidebar( state, selectedSiteId, currentSection?.group ); + } ); + const shouldShowGlobalSiteSidebar = useSelector( ( state ) => { + return getShouldShowGlobalSiteSidebar( state, selectedSiteId, currentSection?.group ); + } ); useEffect( () => { if ( selectedSiteId && siteDomain ) { @@ -114,8 +115,7 @@ const useSiteMenuItems = () => { if ( shouldShowGlobalSidebar ) { return globalSidebarMenu(); } - // Global Site View should be limited to classic interface users only for now. - if ( shouldShowGlobalSiteSidebar && adminInterface === 'wp-admin' ) { + if ( shouldShowGlobalSiteSidebar ) { return globalSiteSidebarMenu( { siteDomain, shouldShowAddOns: shouldShowAddOnsInFallbackMenu, diff --git a/client/state/global-sidebar/selectors.ts b/client/state/global-sidebar/selectors.ts new file mode 100644 index 0000000000000..fdfc9854a8608 --- /dev/null +++ b/client/state/global-sidebar/selectors.ts @@ -0,0 +1,30 @@ +import { isEnabled } from '@automattic/calypso-config'; +import { getSiteOption } from '../sites/selectors'; +import type { AppState } from 'calypso/types'; + +export const getShouldShowGlobalSidebar = ( _: AppState, siteId: number, sectionGroup: string ) => { + let shouldShowGlobalSidebar = false; + if ( isEnabled( 'layout/dotcom-nav-redesign' ) ) { + shouldShowGlobalSidebar = + sectionGroup === 'me' || + sectionGroup === 'reader' || + sectionGroup === 'sites-dashboard' || + ( sectionGroup === 'sites' && ! siteId ); + } + return shouldShowGlobalSidebar; +}; + +export const getShouldShowGlobalSiteSidebar = ( + state: AppState, + siteId: number, + sectionGroup: string +) => { + let shouldShowGlobalSiteSidebar = false; + if ( isEnabled( 'layout/dotcom-nav-redesign' ) ) { + // Global Site View should be limited to classic interface users only for now. + const adminInterface = getSiteOption( state, siteId, 'wpcom_admin_interface' ); + shouldShowGlobalSiteSidebar = + adminInterface === 'wp-admin' && sectionGroup === 'sites' && !! siteId; + } + return shouldShowGlobalSiteSidebar; +};