@wpmvc/admin-sidebar

Professional React hooks for WordPress admin interfaces with complete sidebar management and responsive layout control.

Features

✨ Dual Hook System

• useActiveAdminMenu - Intelligent menu highlighting
• useAdminSidebarLayout - Real-time sidebar state tracking

🚀 Seamless Integration

• HashRouter support
• Automatic responsive layout adjustments

⚡ Performance Optimized

• Lightweight (under 2KB gzipped)
• Zero unnecessary re-renders
• Efficient DOM operations

Installation

npm install @wpmvc/admin-sidebar react-router-dom  
# or  
yarn add @wpmvc/admin-sidebar react-router-dom  

Usage

With React Router

import { HashRouter, useLocation, useNavigate, Outlet } from 'react-router-dom';
import { useActiveAdminMenu, useAdminSidebarLayout } from '@wpmvc/admin-sidebar';

const Layout = () => {
	// Required hooks
	const navigate = useNavigate();
	const location = useLocation();
	const { left, top } = useAdminSidebarLayout();

	// Initialize menu management
	useActiveAdminMenu( {
		pageTopLevelID: '#toplevel_page_my-plugin',
		rootPaths: [ '#/', '#/dashboard' ],
		navigate,
		location,
	} );

	return (
		<div
			style={ {
				marginLeft: left,
				marginTop: top,
				transition: 'margin-left 0.3s ease',
			} }
		>
			<Outlet />
		</div>
	);
};

// Entry point
export default () => (
	<HashRouter>
		<Route element={ <Layout /> }>
			{ /* Add your route items */ }
		</Route>
	</HashRouter>
);

📚 API Reference

useActiveAdminMenu(config: ActiveMenuConfig)

Required Configuration:

| Prop | Type | Description |
|------|------|-------------|
| pageTopLevelID | string | Exact jQuery selector for menu wrapper |
| rootPaths | string[] | Base paths (must include # prefix) |
| navigate | | From useNavigate() |
| location | | From useLocation() |

useAdminSidebarLayout(): SidebarLayout

Return Object:

| Property | Type | Example Value |
|----------|------|--------------|
| left | number | 190px (expanded) |
| top | number | 32px (admin bar) |

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you'd like to contribute to the project.