# thinkrank/1.0.0/src/admin/components/essential-seo/SidebarNavigation.js

ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 134 lines.

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/essential-seo/SidebarNavigation.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/essential-seo/SidebarNavigation.js
- Modified: 2025-08-10T07:57:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/essential-seo/SidebarNavigation.js#L10-L20`.

```javascript
/**
 * Sidebar Navigation Component for Essential SEO
 * 
 * Left sidebar navigation that replaces nested tabs with a hierarchical structure
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { useState, memo, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
    Panel,
    PanelBody,
    PanelRow,
    Button
} from '@wordpress/components';

/**
 * Navigation structure configuration
 */
const navigationStructure = [
    {
        id: 'site-identity',
        title: __('Site Identity', 'thinkrank'),
        items: [
            { id: 'basic-info', title: __('Basic Info', 'thinkrank') },
            { id: 'title-formats', title: __('Title Formats', 'thinkrank') },
            { id: 'breadcrumbs', title: __('Breadcrumbs', 'thinkrank') },
            { id: 'hero-section', title: __('Hero & Branding', 'thinkrank') },
            { id: 'local-seo', title: __('Business Info', 'thinkrank') }
        ]
    },
    {
        id: 'integrations',
        title: __('Integrations', 'thinkrank'),
        items: [
            { id: 'google-services', title: __('Google Services', 'thinkrank') },
            { id: 'social-platforms', title: __('Social Platforms', 'thinkrank') }
        ]
    },
    {
        id: 'analytics',
        title: __('Analytics', 'thinkrank'),
        items: [
            { id: 'setup', title: __('Setup & Integration', 'thinkrank') },
            { id: 'dashboard', title: __('Dashboard', 'thinkrank') },
            { id: 'opportunities', title: __('Opportunities', 'thinkrank') },
            { id: 'insights', title: __('Insights', 'thinkrank') }
        ]
    },
    {
        id: 'performance',
        title: __('Performance', 'thinkrank'),
        items: [
            { id: 'core-web-vitals', title: __('Core Web Vitals', 'thinkrank') },
            { id: 'seo-performance', title: __('Opportunities', 'thinkrank') },
            { id: 'monitoring', title: __('Historical Data', 'thinkrank') },
            { id: 'recommendations', title: __('Diagnostics', 'thinkrank') }
        ]
    },

    {
        id: 'schema',
        title: __('Schema Manager', 'thinkrank'),
        items: [
            { id: 'schema-settings', title: __('Schema Settings', 'thinkrank') },
            { id: 'schema-types', title: __('Schema Types', 'thinkrank') },
            { id: 'organization', title: __('Organization', 'thinkrank') },
            { id: 'local-business', title: __('LocalBusiness', 'thinkrank') },
            { id: 'person', title: __('Person', 'thinkrank') },
            { id: 'website', title: __('Website', 'thinkrank') },
            { id: 'deployment', title: __('Deployment', 'thinkrank') }
        ]
    },
    {
        id: 'social-media',
        title: __('Social Media', 'thinkrank'),
        items: [
            { id: 'open-graph', title: __('Open Graph', 'thinkrank') },
            { id: 'twitter-cards', title: __('Twitter Cards', 'thinkrank') },
            { id: 'preview', title: __('Preview', 'thinkrank') }
        ]
    },
    {
        id: 'crawling-ai-indexing',
        title: __('Crawling & AI Indexing', 'thinkrank'),
        items: [
            { id: 'robots-management', title: __('Robots.txt', 'thinkrank') },
            { id: 'xml-sitemap', title: __('XML Sitemap', 'thinkrank') },
            { id: 'llms-ai-indexing', title: __('LLMs.txt for AI', 'thinkrank') }
        ]
    }
];

// No need for custom NavigationSection - using WordPress Panel components

/**
 * Main Sidebar Navigation Component using WordPress Panel - Optimized with React.memo
 */
const SidebarNavigation = memo(({ activeSection, activeItem, onNavigate }) => {
    // Memoize the click handler to prevent unnecessary re-renders
    const handleItemSelect = useCallback((sectionId, itemId) => {
        onNavigate(sectionId, itemId);
    }, [onNavigate]);

    return (
        <Panel>
            {navigationStructure.map((section) => (
                <PanelBody
                    key={section.id}
                    title={section.title}
                    initialOpen={activeSection === section.id}
                >
                    {section.items.map((item) => (
                        <PanelRow key={item.id}>
                            <Button
                                variant={activeSection === section.id && activeItem === item.id ? 'primary' : 'secondary'}
                                onClick={() => handleItemSelect(section.id, item.id)}
                                style={{ width: '100%', justifyContent: 'flex-start' }}
                            >
                                {item.title}
                            </Button>
                        </PanelRow>
                    ))}
                </PanelBody>
            ))}
        </Panel>
    );
});

export default SidebarNavigation;
export { navigationStructure };

```