Professional React hooks for WordPress admin interfaces with complete sidebar management and responsive layout control.
npm install @wpmvc/admin-sidebar    
Professional React hooks for WordPress admin interfaces with complete sidebar management and responsive layout control.
āØ 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
---
``bash `
npm install @wpmvc/admin-sidebar react-router-dom or
yarn add @wpmvc/admin-sidebar react-router-dom
---
`tsx
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 (
marginLeft: left,
marginTop: top,
transition: 'margin-left 0.3s ease',
} }
>
// Entry point
export default () => (
{ / Add your route items / }
);
`
---
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() |
---
Return Object:
| Property | Type | Example Value |
|----------|------|--------------|
| left | number | 190px (expanded) | top
| | number | 32px` (admin bar) |
Contributions are welcome! Please open an issue or submit a pull request if you'd like to contribute to the project.