import React, { useEffect } from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import { applyFilters } from '@wordpress/hooks'; import * as Icons from '../icons'; const iconMap: any = applyFilters( 'thumbpress_icon_map', { ...Icons } ) as any; import { cn } from '../../lib/utils'; interface NavItemData { to: string; label: string; icon: string; pro?: boolean; } interface SidebarProps { navItems?: NavItemData[]; onNavRequest?: ( to: string ) => boolean; } export default function Sidebar( { navItems = [], onNavRequest }: SidebarProps ) { const location = useLocation(); // Sync WP admin submenu active state with SPA route useEffect( () => { // Find ThumbPress submenu by locating a link with page=thumbpress const thumbpressLink = document.querySelector( '#adminmenu a[href*="page=thumbpress"]' ); if ( ! thumbpressLink ) return; const submenu = thumbpressLink.closest( 'ul.wp-submenu' ) || thumbpressLink.closest( 'li' )?.querySelector( 'ul.wp-submenu' ); if ( ! submenu ) return; const currentHash = '#' + location.pathname; submenu.querySelectorAll( 'li' ).forEach( ( li ) => li.classList.remove( 'current' ) ); submenu.querySelectorAll( 'a' ).forEach( ( a ) => { a.classList.remove( 'current' ); a.removeAttribute( 'aria-current' ); } ); // Match by hash ending or Dashboard special case let matched: HTMLAnchorElement | null = null; submenu.querySelectorAll( 'a' ).forEach( ( a ) => { const href = a.getAttribute( 'href' ) || ''; const hashIndex = href.indexOf( '#' ); const linkHash = hashIndex !== -1 ? href.substring( hashIndex ) : ''; if ( ( linkHash === currentHash ) || ( currentHash === '#/' && ( linkHash === '#' || linkHash === '#/' || linkHash === '' ) ) ) { matched = a as HTMLAnchorElement; } } ); if ( matched ) { ( matched as HTMLAnchorElement ).classList.add( 'current' ); ( matched as HTMLAnchorElement ).setAttribute( 'aria-current', 'page' ); ( matched as HTMLAnchorElement ).parentElement?.classList.add( 'current' ); } }, [ location.pathname ] ); return ( ); }