<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
$current_page = isset($_GET['page']) ? sanitize_text_field($_GET['page']) : 'easy-invoice';

// Function to check if current page is a subpage of a main menu
function is_subpage_of($current_page, $main_page) {
    // Check if current page starts with the main page slug
    $current_page = $current_page ?? '';
    $main_page = $main_page ?? '';
    return strpos($current_page, $main_page) === 0;
}

// Function to get the active menu class
function get_menu_class($current_page, $menu_page, $is_active = false) {
    if ($is_active) {
        return 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600';
    }
    return 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700';
}

// Function to get the active icon class
function get_icon_class($current_page, $menu_page, $is_active = false) {
    if ($is_active) {
        return 'text-indigo-600';
    }
    return 'text-gray-400 group-hover:text-indigo-500';
}

// Determine which menu should be active
$is_dashboard_active = $current_page === 'easy-invoice';
$is_invoices_active = in_array($current_page, [
    'easy-invoice-all',           // All invoices
    'easy-invoice-builder',       // Invoice builder
    'easy-invoice-preview'        // Invoice preview
]);
$is_quotes_active = in_array($current_page, [
    'easy-quote-all',             // All quotes
    'easy-invoice-quote-builder',         // Quote builder
    'easy-quote-preview'          // Quote preview
]);
$is_payments_active = in_array($current_page, [
    'easy-invoice-payments',      // All payments
    'easy-invoice-payment-new'    // Add new payment
]);
$is_clients_active = in_array($current_page, [
    'easy-invoice-clients',       // All clients
    'easy-invoice-client-edit',   // Edit client
    'easy-invoice-client-view'    // View client
]);
$is_item_library_active = in_array($current_page, [
    'easy-invoice-pro-item-library',  // Item Library (Pro)
    'easy-invoice-item-library'       // Item Library (alternative)
]);
$is_templates_active = in_array($current_page, [
    'easy-invoice-templates',         // Template Builder (Pro)
    'easy-invoice-template-builder'   // Template Builder page
]);
$is_reports_active = $current_page === 'easy-invoice-reports';
$is_settings_active = in_array($current_page, [
    'easy-invoice-settings',      // Main settings
    'easy-invoice-email-settings', // Email settings
    'easy-invoice-email-settings-general',
    'easy-invoice-email-settings-invoice',
    'easy-invoice-email-settings-quote',
    'easy-invoice-email-settings-payment',
    'easy-invoice-email-settings-payment-reminder',
    'easy-invoice-pro-settings',  // Pro settings
    'easy-invoice-pro-translations' // Pro translations
]);
// The "Addons" sidebar entry is only active on the Addons grid itself.
// Per-addon settings pages (Time Tracking / Smart Reminders / White-Label /
// Team & Audit / Webhooks) are now top-level sidebar entries — each highlights
// itself; the parent Addons row should NOT also light up.
$is_addons_active = ($current_page === 'easy-invoice-addons');
?>

<?php
/*
 * The sidebar is 256px wide and fixed. It used to carry no responsive classes at
 * all, and the content wrapper below was an unconditional `pl-64` — so on a 390px
 * phone the sidebar ate 256px and left ~134px for the actual page. Stat cards
 * became unreadable slivers, tables collapsed to a column of checkboxes, and every
 * screen overflowed horizontally.
 *
 * It is now an off-canvas drawer under `lg` (slid out by default, toggled by the
 * button below) and pinned open from `lg` up, which is the behaviour it always had
 * on desktop. The toggle script near the bottom of this file adds and removes
 * `-translate-x-full` on the sidebar to slide it; `lg:translate-x-0` overrides that
 * from 1024px up, so the drawer state is irrelevant on desktop.
 */
?>
<button type="button" id="ei-sidebar-toggle"
        class="lg:hidden fixed top-3 left-3 z-[60] inline-flex items-center justify-center w-11 h-11 rounded-md bg-white border border-gray-300 shadow-sm text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        aria-controls="ei-app-sidebar" aria-expanded="false">
    <span class="sr-only"><?php esc_html_e('Toggle Easy Invoice navigation', 'easy-invoice'); ?></span>
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
</button>

<div id="ei-sidebar-backdrop" class="lg:hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-40 hidden" aria-hidden="true"></div>

<div id="ei-app-sidebar" class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg border-r border-gray-200 ei-app-sidebar flex flex-col z-50 transform -translate-x-full transition-transform duration-200 ease-in-out lg:translate-x-0">
    
    <div class="ei-app-sidebar-top flex flex-col items-center justify-center px-4 py-2 border-b border-gray-200 box-border flex-shrink-0">
        <?php
        /**
         * Default logo HTML. Addons (White-Label) can short-circuit this to
         * inject a custom image/label without touching this template.
         *
         * Filter: easy_invoice_admin_logo_html
         * Args:   ($default_html)
         */
        $default_logo_html = '<div class="flex items-center space-x-2 mb-1">'
            . '<div class="flex items-center justify-center w-8 h-8 bg-indigo-600 rounded ei-app-logo-mark">'
            . '<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">'
            .   '<path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
            .   '<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
            .   '<path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
            .   '<path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
            .   '<path d="M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
            . '</svg></div>'
            . '<span class="text-lg font-semibold text-gray-900 ei-app-logo-label">' . esc_html__('Easy Invoice', 'easy-invoice') . '</span>'
            . '</div>';
        echo wp_kses_post(apply_filters('easy_invoice_admin_logo_html', $default_logo_html));
        ?>
        <?php if (apply_filters('easy_invoice_admin_show_back_to_wp', true)): ?>
        <a href="<?php echo esc_url(admin_url()); ?>" target="_blank" class="inline-flex items-center text-xs text-gray-500 hover:text-gray-700 transition-colors duration-200">
            <svg class="w-3 h-3 mr-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Back to WordPress', 'easy-invoice' ); ?>
        </a>
        <?php endif; ?>

        
        <?php if (apply_filters('easy_invoice_admin_show_version_badges', true)): ?>
        <div class="mt-1 flex flex-wrap items-center justify-center gap-1.5">
            
            <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700 border border-gray-200">
                <svg class="w-2.5 h-2.5 mr-1 text-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                v<?php echo esc_html(EASY_INVOICE_VERSION); ?>
            </span>

            <?php if (defined('EASY_INVOICE_PRO_VERSION') && function_exists('is_plugin_active') && is_plugin_active('easy-invoice-pro/easy-invoice-pro.php')): ?>
                
                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 border border-green-200">
                    <svg class="w-2.5 h-2.5 mr-1 text-green-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <?php /* translators: %s: Pro plugin version. */ echo esc_html( sprintf( __( 'Pro v%s', 'easy-invoice' ), EASY_INVOICE_PRO_VERSION ) ); ?>
                </span>
            <?php endif; ?>
        </div>
        <?php endif; // easy_invoice_admin_show_version_badges ?>
    </div>

    
    <nav class="ei-app-sidebar-nav flex-1 min-h-0 overflow-y-auto mt-6 px-3 pb-4 space-y-2">
        
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice')); ?>"
           class="<?php echo esc_attr($is_dashboard_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_dashboard_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 13H9V19H3V13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 13H15V19H9V13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 13H21V19H15V13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3 5H9V11H3V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 5H15V11H9V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 5H21V11H15V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Dashboard', 'easy-invoice' ); ?>
        </a>

        
        <?php
// A sidebar entry is drawn only when the current user can open the page it
// leads to: administrators can open everything; a team member with an EI role
// (Pro Team Roles) is mapped through the same filter the menu uses.
$ei_can_open = static function ($slug) {
    return current_user_can((string) apply_filters('easy_invoice_menu_capability', 'manage_options', $slug));
};
?>
<a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice-all')); ?>"
           class="<?php echo esc_attr($is_invoices_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_invoices_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 11V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M14.5 13H10.75a1.75 1.75 0 0 0 0 3.5h2.5a1.75 1.75 0 0 1 0 3.5H9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Invoices', 'easy-invoice' ); ?>
        </a>

        
        <?php if ($ei_can_open('easy-quote-all')) : ?>
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-quote-all')); ?>"
           class="<?php echo esc_attr($is_quotes_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_quotes_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8.5 15.5L11 18L16 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Quotes', 'easy-invoice' ); ?>
        </a>
        <?php endif; ?>

        
        <?php if ($ei_can_open('easy-invoice-payments')) : ?>
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice-payments')); ?>"
           class="<?php echo esc_attr($is_payments_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_payments_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="1" y="4" width="22" height="16" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <line x1="1" y1="10" x2="23" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Payments', 'easy-invoice' ); ?>
        </a>
        <?php endif; ?>

        
        <?php if ($ei_can_open('easy-invoice-clients')) : ?>
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice-clients')); ?>"
           class="<?php echo esc_attr($is_clients_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_clients_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M23 21V19C23 18.1137 22.6485 17.2628 22.0237 16.6425C21.3989 16.0221 20.5471 15.6722 19.66 15.6722C18.7729 15.6722 17.9211 16.0221 17.2963 16.6425C16.6715 17.2628 16.32 18.1137 16.32 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M16.32 11.6722C18.36 11.6722 20 10.0322 20 7.99219C20 5.95219 18.36 4.31219 16.32 4.31219" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Clients', 'easy-invoice' ); ?>
        </a>
        <?php endif; ?>

        <?php
        // Item Library + Template Builder sidebar entries were here.
        // They've been moved BELOW the Addons menu — see the per-addon
        // sidebar loop further down in this file (lines ~365). The loop
        // automatically renders a sidebar entry for every enabled addon
        // whose registry entry has a non-empty settings_url, so the two
        // explicit blocks are no longer needed (and were creating
        // visual duplication with the loop).
        ?>

        <?php
        // Reports — addon-gated (PERSONAL tier).
        //
        // When the addon is loaded, the per-addon sidebar loop further
        // down in this file (after the Addons menu entry) renders the
        // Reports link automatically — so this block only handles the
        // Free-user upsell state. Showing it twice (here AND via the
        // loop) was the cause of the "2 Reports pages" duplicate.
        ?>
        <?php if (!easy_invoice_has_pro()): ?>
        
        <a href="#" id="reports-menu-link"
           class="text-gray-600 hover:bg-indigo-50 hover:text-indigo-700 group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="text-gray-400 group-hover:text-indigo-500 mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 20V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 20V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M6 20V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Reports', 'easy-invoice' ); ?>
            <span class="ml-auto inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-600 text-white shadow-sm">
                <svg class="w-4 h-4 mr-1 text-white" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 8L15 13.2L18 10.5L17.3 14H6.7L6 10.5L9 13.2L12 8M12 4L8.5 10L3 5L5 16H19L21 5L15.5 10L12 4Z"/>
                </svg>
                <?php esc_html_e( 'Pro', 'easy-invoice' ); ?>
            </span>
        </a>
        <?php endif; ?>

        
        <?php if ($ei_can_open('easy-invoice-settings')) : ?>
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice-settings')); ?>"
           class="<?php echo esc_attr($is_settings_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_settings_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Settings', 'easy-invoice' ); ?>
        </a>
        <?php endif; ?>

        <?php $is_import_active = ( 'easy-invoice-import' === $current_page ); ?>
        <?php if ($ei_can_open('easy-invoice-import')) : ?>
        <a href="<?php echo esc_url( admin_url( 'admin.php?page=easy-invoice-import' ) ); ?>"
           class="<?php echo esc_attr( $is_import_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700' ); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_import_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <?php esc_html_e( 'Import', 'easy-invoice' ); ?>
        </a>
        <?php endif; ?>

        
        <?php
        // Check if Pro plugin is active and get license status
        $show_license_badge = false;
        $license_status = 'inactive';
        $license_text = __( 'Deactivated', 'easy-invoice' );

        if (easy_invoice_has_pro()) {
            $license_key = \EasyInvoicePro\Updater\License::get_license_key();
            $is_valid = \EasyInvoicePro\Updater\License::has_valid_license();
            $is_expired = \EasyInvoicePro\Updater\License::has_license_expired();

            // Always show badge for Pro version
            $show_license_badge = true;

            if (!empty($license_key)) {
                if ($is_valid && !$is_expired) {
                    $license_status = 'activated';
                    $license_text = __( 'Activated', 'easy-invoice' );
                } elseif ($is_expired) {
                    $license_status = 'expired';
                    $license_text = __( 'Expired', 'easy-invoice' );
                } else {
                    $license_status = 'inactive';
                    $license_text = __( 'Deactivated', 'easy-invoice' );
                }
            } else {
                // No license key entered
                $license_status = 'inactive';
                $license_text = __( 'Inactive', 'easy-invoice' );
            }
        } else {
            // Free version - show Free badge
            $show_license_badge = true;
            $license_status = 'free';
            $license_text = __( 'Free', 'easy-invoice' );
        }
        ?>
        <?php if ($ei_can_open('easy-invoice-license')) : ?>
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice-license')); ?>"
           class="<?php echo esc_attr(($current_page === 'easy-invoice-license') ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            
            <svg class="<?php echo ($current_page === 'easy-invoice-license') ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="7.5" cy="15.5" r="5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M21 2L11.5 11.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15.5 7.5L18.5 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="flex-1"><?php esc_html_e( 'License', 'easy-invoice' ); ?></span>
            <?php if ($show_license_badge): ?>
            <span class="license-status-badge <?php echo esc_attr($license_status); ?>">
                <span class="status-dot"></span>
                <?php echo esc_html( $license_text ); ?>
            </span>
            <?php endif; ?>
        </a>
        <?php endif; ?>

        
        <?php
        $show_free_vs_pro = !easy_invoice_has_pro();

        if ($show_free_vs_pro):
        ?>
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice-free-vs-pro')); ?>"
           class="<?php echo esc_attr(($current_page === 'easy-invoice-free-vs-pro') ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo ($current_page === 'easy-invoice-free-vs-pro') ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 6L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3 12L21 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3 18L21 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 3L9 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 3L15 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="flex-1"><?php esc_html_e('Free vs Pro', 'easy-invoice'); ?></span>
            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                <?php esc_html_e('Compare', 'easy-invoice'); ?>
            </span>
        </a>
        <?php endif; ?>

        <?php
        // Per-addon sidebar entries. Show every enabled addon that has
        // its own dedicated page (Smart Reminders, Time Tracking,
        // White Label, etc. — anything whose settings_url is NOT a
        // deep-link into the main Settings page). Addons whose settings
        // live inside Settings → <section> (Secure Links → Advanced,
        // Partial Payments → Invoice, etc.) are intentionally excluded:
        // the main Settings page's section nav is already the
        // navigation aid for those, and a sidebar entry would be a
        // duplicate path to the same place. Users still reach those
        // via the "Settings →" link on the addon card.
        if (class_exists('\\EasyInvoice\\Addons\\AddonRegistry') && class_exists('\\EasyInvoice\\Addons\\AddonManager')):
            foreach (\EasyInvoice\Addons\AddonRegistry::all() as $ei_addon):
                if (empty($ei_addon['settings_url']))                              continue;
                if (!\EasyInvoice\Addons\AddonManager::isEnabled($ei_addon['id'])) continue;
                if (!\EasyInvoice\Addons\AddonManager::userCanAccess($ei_addon['id'])) continue;

                // Skip addons whose settings_url deep-links into the
                // main Settings page (easy-invoice-settings). Those
                // are accessed via the card's "Settings →" link only.
                $ei_addon_parsed = wp_parse_url($ei_addon['settings_url']);
                $ei_addon_query  = [];
                if (!empty($ei_addon_parsed['query'])) {
                    parse_str($ei_addon_parsed['query'], $ei_addon_query);
                }
                $ei_addon_slug = $ei_addon_query['page'] ?? '';
                if ($ei_addon_slug === 'easy-invoice-settings') continue;
                if (!$ei_can_open($ei_addon_slug)) continue;

                $ei_addon_active = ($current_page === $ei_addon_slug);
                $ei_addon_icon   = !empty($ei_addon['icon']) ? $ei_addon['icon'] : 'dashicons-admin-plugins';
                $ei_addon_label  = !empty($ei_addon['short_name']) ? $ei_addon['short_name'] : $ei_addon['name'];
        ?>
            <a href="<?php echo esc_url($ei_addon['settings_url']); ?>"
               class="<?php echo $ei_addon_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'; ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200"
               title="<?php echo esc_attr($ei_addon['name']); ?>">
                <span class="dashicons <?php echo esc_attr($ei_addon_icon); ?> mr-3 flex-shrink-0 h-5 w-5 <?php echo $ei_addon_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?>" style="font-size:20px;width:20px;height:20px;line-height:20px;"></span>
                <span class="flex-1 truncate"><?php echo esc_html($ei_addon_label); ?></span>
            </a>
        <?php
            endforeach;
        endif;
        ?>

        
        <?php if ($ei_can_open('easy-invoice-addons')) : ?>
        <a href="<?php echo esc_url(admin_url('admin.php?page=easy-invoice-addons')); ?>"
           class="<?php echo esc_attr($is_addons_active ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'); ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo $is_addons_active ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M17.5 14V21M14 17.5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="flex-1"><?php esc_html_e('Addons', 'easy-invoice'); ?></span>
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700">
                <?php esc_html_e('New', 'easy-invoice'); ?>
            </span>
        </a>
        <?php endif; ?>

        
        <?php if (apply_filters('easy_invoice_show_upgrade_prompts', true)) : ?>
        <a href="<?php echo esc_url('https://www.facebook.com/groups/mantrabraincommunity'); ?>"
           target="_blank"
           rel="noopener noreferrer"
           class="<?php echo ($current_page === 'easy-invoice-join-community') ? 'bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600' : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-700'; ?> group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="<?php echo ($current_page === 'easy-invoice-join-community') ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-500'; ?> mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 2H15C13.6739 2 12.4021 2.52678 11.4645 3.46447C10.5268 4.40215 10 5.67392 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.73478 14.1054 6.48043 14.2929 6.29289C14.4804 6.10536 14.7348 6 15 6H18V2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="flex-1"><?php esc_html_e('Join Community', 'easy-invoice'); ?></span>
            <svg class="flex-shrink-0 h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
            </svg>
        </a>
        <?php endif; ?>

        
        <?php
        /**
         * Filter the sidebar help link. Pro's White Label addon points it at
         * the agency's own support page.
         *
         * @param string $url
         */
        $ei_help_url = apply_filters('easy_invoice_help_link_url', 'https://easy-invoice.matrixaddons.com/docs/');
        ?>
        <a href="<?php echo esc_url($ei_help_url); ?>"
           target="_blank"
           rel="noopener noreferrer"
           class="text-gray-600 hover:bg-indigo-50 hover:text-indigo-700 group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200">
            <svg class="text-gray-400 group-hover:text-indigo-500 mr-3 flex-shrink-0 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 19.5V4.5C4 3.4 4.9 2.5 6 2.5H19C19.5 2.5 20 3 20 3.5V20.5C20 21 19.5 21.5 19 21.5H6C4.9 21.5 4 20.6 4 19.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8 7H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <path d="M8 11H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <path d="M8 15H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <span class="flex-1"><?php esc_html_e('Documentation', 'easy-invoice'); ?></span>
            <svg class="flex-shrink-0 h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
            </svg>
        </a>

    </nav>

    
    <div class="ei-app-sidebar-foot border-t border-gray-200 p-4 flex-shrink-0 bg-white">
        <div class="relative">
            <button type="button" id="user-dropdown-button" class="flex items-center w-full text-left hover:bg-gray-50 rounded-lg p-2 transition-colors duration-200">
                <div class="flex-shrink-0">
                    <div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <span class="text-gray-600 font-medium text-sm"><?php echo esc_html(substr(wp_get_current_user()->display_name, 0, 1)); ?></span>
                    </div>
                </div>
                <div class="ml-3 flex-1">
                    <p class="text-sm font-medium text-gray-700"><?php echo esc_html(wp_get_current_user()->display_name); ?></p>
                    <p class="text-xs text-gray-500"><?php echo esc_html(wp_get_current_user()->user_email); ?></p>
                </div>
                <div class="flex-shrink-0">
                    <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </div>
            </button>

            
            <div id="user-dropdown-menu" class="hidden absolute bottom-full left-0 right-0 mb-2 bg-white border border-gray-200 rounded-lg shadow-lg z-50">
                <div class="py-1">
                    <a href="<?php echo esc_url(admin_url()); ?>" target="_blank" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200">
                        <svg class="mr-3 h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        <?php esc_html_e('Back to WordPress', 'easy-invoice'); ?>
                    </a>
                    <a href="<?php echo esc_url(wp_logout_url()); ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200">
                        <svg class="mr-3 h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                        </svg>
                        <?php esc_html_e('Logout', 'easy-invoice'); ?>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<?php
/*
 * The old mobile menu button lived here. Removed in favour of #ei-sidebar-toggle
 * at the top of this file, because this one could not work:
 *
 *   - Its handler bound to `document.querySelector('button[aria-expanded="false"]')`,
 *     i.e. the first such button anywhere in the document — not reliably this one.
 *   - It toggled a `hidden` class the sidebar never had. The sidebar had no
 *     responsive rules at all, so it was always open; toggling `hidden` removed it
 *     outright while the content kept its unconditional `pl-64`, leaving a 256px
 *     empty gutter.
 *   - It was `sm:hidden`, so it only appeared below 640px, while the layout
 *     actually breaks below 1024px.
 */
?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    /* Sidebar drawer is handled by the #ei-sidebar-toggle script above. */

    // Handle Reports menu click for premium feature
    const reportsMenuLink = document.getElementById('reports-menu-link');
    if (reportsMenuLink) {
        reportsMenuLink.addEventListener('click', function(e) {
            e.preventDefault();
            // Show premium popup using the proper confirmation modal
            if (typeof EasyInvoiceConfirmation !== 'undefined') {
                EasyInvoiceConfirmation.showFeatureUpgrade(
                    <?php echo wp_json_encode( __( 'Detailed Reports', 'easy-invoice' ) ); ?>,
                    <?php echo wp_json_encode( __( 'Get comprehensive insights into your business with detailed reports including revenue analysis, payment statistics, invoice status tracking, and monthly revenue charts. Upgrade to Easy Invoice Pro to unlock advanced reporting features.', 'easy-invoice' ) ); ?>
                );
            } else {
                // Fallback to alert if confirmation modal is not available
                alert('<?php echo esc_js(__('Detailed Reports is a premium feature. Upgrade to Easy Invoice Pro to unlock advanced reporting features including revenue analysis, payment statistics, and monthly revenue charts.', 'easy-invoice')); ?>');
            }
        });
    }

    // Handle user dropdown
    const userDropdownButton = document.getElementById('user-dropdown-button');
    const userDropdownMenu = document.getElementById('user-dropdown-menu');

    if (userDropdownButton && userDropdownMenu) {
        userDropdownButton.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            userDropdownMenu.classList.toggle('hidden');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!userDropdownButton.contains(e.target) && !userDropdownMenu.contains(e.target)) {
                userDropdownMenu.classList.add('hidden');
            }
        });

        // Close dropdown when pressing Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                userDropdownMenu.classList.add('hidden');
            }
        });
    }
});
</script>

<style>
html.wp-toolbar {
    padding-top: 0 !important;
}
/* Matches hideAdminUi: hidden admin bar must not reserve body padding or main content shifts vs fixed sidebar */
body.easy-invoice-admin-body.admin-bar {
    padding-top: 0 !important;
}
body.easy-invoice-admin-body.admin-bar #wpbody,
body.easy-invoice-admin-body.admin-bar #wpbody-content {
    padding-top: 0 !important;
}

/* Keep any admin notice clear of the fixed sidebar.
 *
 * WordPress prints `admin_notices` output into #wpbody-content BEFORE this
 * template's markup, so a notice sits outside the `.lg:pl-64` content column and
 * runs edge to edge underneath the 16rem fixed sidebar — the first words of every
 * line get covered. disableAdminNoticesOnEasyInvoicePages() suppresses most
 * notices on our screens, but not all of them: WordPress core prints some
 * (php_update_notice, update-nag) outside that hook, and any notice we
 * deliberately keep would be clipped the same way. Indenting them costs nothing
 * when there are none to show. */
@media (min-width: 1024px) {
    body.easy-invoice-admin-body #wpbody-content > .notice,
    body.easy-invoice-admin-body #wpbody-content > .updated,
    body.easy-invoice-admin-body #wpbody-content > .update-nag,
    body.easy-invoice-admin-body #wpbody-content > .error {
        margin-left: 17rem;
        margin-right: 1rem;
    }
}

/* Full-height app shell — works WITH the global
   `#wpbody-content { display: flex; flex-direction: column; min-height: 100vh }`
   rule defined in easy-invoice.css. Because the parent is a flex
   column, the wrapper can't rely on `height: 100%` alone (flex
   children stay at content height unless given `flex-grow`). We give
   the wrapper `flex: 1` so it expands to fill whatever vertical space
   the flex column offers, and a `min-height: 100vh` floor so short
   pages still paint the bg-gray-50 all the way down to the viewport
   bottom. Removing the previous html → body → wpwrap → wpcontent
   chain that wasn't doing anything useful in the flex-column world. */
.easy-invoice-admin {
    flex: 1;
    min-height: 100vh;
}

/*
 * Below `lg` the sidebar collapses to a drawer and #ei-sidebar-toggle is pinned at
 * top-left. Every page header starts hard against the left edge, so without this
 * the toggle sat on top of the page title ("Invoices" rendered as "voices") and on
 * top of the builders' "Back to invoices" link.
 *
 * Reserve the toggle's width (44px) plus its offset so headers start clear of it.
 * Both header variants are covered: `.ei-app-page-header` is used by the eight
 * list/settings screens, `.ei-app-header-sync` by the invoice and quote builders.
 */
@media (max-width: 1023px) {
    /* !important is needed here, not for weight games: five of these headers
       (invoice/quote listings, payments, clients, reports) set `padding-left`
       in an inline style attribute, which a stylesheet rule cannot otherwise
       beat. Those inline paddings pair with a negative margin to bleed the
       header full-width, so they cannot simply be removed. */
    .ei-app-page-header,
    .ei-app-header-sync {
        padding-left: 3.75rem !important;
    }
}

/* Custom color for active icons */
.group:hover svg {
    color: rgb(79 70 229) !important;
}

/* Active state icon color */
.bg-indigo-50 svg {
    color: rgb(79 70 229) !important;
}

/* Hover state for non-active items */
.group:hover:not(.bg-indigo-50) svg {
    color: rgb(79 70 229) !important;
}

/* Sidebar scrollbar — slim, only visible on hover/scroll. Firefox uses scrollbar-* */
.ei-app-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0) transparent;
    transition: scrollbar-color 0.2s ease;
}
.ei-app-sidebar-nav:hover {
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
/* WebKit (Chrome / Safari / Edge) */
.ei-app-sidebar-nav::-webkit-scrollbar {
    width: 8px;
}
.ei-app-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.ei-app-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease;
}
.ei-app-sidebar-nav:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.45);
}
.ei-app-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.7);
}
</style>

<div class="min-h-screen bg-white easy-invoice-admin">
    <a href="#easy-invoice-main" class="easy-invoice-skip-link screen-reader-text"><?php esc_html_e( 'Skip to main content', 'easy-invoice' ); ?></a>
    
    <?php // pl-64 only from `lg` up — under that the sidebar is an off-canvas drawer
          // and reserving 256px of padding left phones with ~134px of usable width. ?>
    <div id="easy-invoice-main" class="lg:pl-64" tabindex="-1">
        <?php

        $page = isset($_GET['page']) ? sanitize_text_field($_GET['page']) : 'easy-invoice';
        // Content will be inserted here
        do_action('easy_invoice_admin_before_main_content', $page);

        do_action('easy_invoice_admin_main_content', $page);

        do_action('easy_invoice_admin_after_main_content', $page);

    ?>
    </div>
    
    
    <script>
    /* Off-canvas sidebar for viewports below Tailwind's `lg` (1024px).
       Kept dependency-free and inline so it works on every Easy Invoice screen
       without touching the 13 individual page templates. */
    (function () {
        var toggle   = document.getElementById('ei-sidebar-toggle');
        var sidebar  = document.getElementById('ei-app-sidebar');
        var backdrop = document.getElementById('ei-sidebar-backdrop');
        if (!toggle || !sidebar || !backdrop) { return; }

        function setOpen(open) {
            sidebar.classList.toggle('-translate-x-full', !open);
            backdrop.classList.toggle('hidden', !open);
            toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
            /* Stop the page scrolling behind the drawer while it is open. */
            document.body.style.overflow = open ? 'hidden' : '';
        }

        toggle.addEventListener('click', function () {
            setOpen(sidebar.classList.contains('-translate-x-full'));
        });
        backdrop.addEventListener('click', function () { setOpen(false); });

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && !sidebar.classList.contains('-translate-x-full')) {
                setOpen(false);
                toggle.focus();
            }
        });

        /* Closing on navigation keeps the drawer from being stuck open after a
           click-through, and resizing up to desktop must clear the inline
           overflow lock the drawer set. */
        sidebar.addEventListener('click', function (e) {
            if (e.target.closest('a') && window.matchMedia('(max-width: 1023px)').matches) { setOpen(false); }
        });
        window.matchMedia('(min-width: 1024px)').addEventListener('change', function (ev) {
            if (ev.matches) { setOpen(false); document.body.style.overflow = ''; }
        });
    })();

    if (typeof ajaxurl === 'undefined') {
        var ajaxurl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
    }
    </script>
</div>