| @@ -434,14 +434,18 @@ | ||
| 434 | 434 | add_settings_field( 'meowapps_hide_ads', 'Meow Apps Menu', [ $this, 'meowapps_hide_dashboard_callback' ], 'general' ); |
| 435 | 435 | return; |
| 436 | 436 | } |
| 437 | 437 | |
| 438 | - // Create standard menu if it does not already exist | |
| 438 | + // Create standard menu if it does not already exist. | |
| 439 | + // The cat logo is injected as an <img> inside the menu title (rather than passed as | |
| 440 | + // the $icon_url argument) so the original SVG fills are preserved — passing it via | |
| 441 | + // $icon_url makes WordPress add the .svg class and the admin color scheme strips | |
| 442 | + // the colors to a single fill. | |
| 439 | 443 | global $submenu; |
| 440 | 444 | if ( !isset( $submenu[ 'meowapps-main-menu' ] ) ) { |
| 441 | 445 | add_menu_page( |
| 442 | 446 | 'Meow Apps', |
| 443 | - '<img alt="Meow Apps" style="width: 21px; margin-left: -28px; position: absolute; margin-top: 2px;" src="' . MeowKit_MWCODE_Admin::$logo . '" />Meow Apps', | |
| 447 | + '<img alt="Meow Apps" class="meowapps-menu-icon" src="' . MeowKit_MWCODE_Admin::$logo . '" />Meow Apps', | |
| 444 | 448 | 'manage_options', |
| 445 | 449 | 'meowapps-main-menu', |
| 446 | 450 | [ $this, 'admin_meow_apps' ], |
| 447 | 451 | '', |
| @@ -456,15 +460,84 @@ | ||
| 456 | 460 | [ $this, 'admin_meow_apps' ] |
| 457 | 461 | ); |
| 458 | 462 | } |
| 459 | 463 | |
| 460 | - // Add CSS to hide the default icon | |
| 464 | + // Position the cat icon so it sits in the standard icon column in both the | |
| 465 | + // expanded and the collapsed (folded) sidebar. | |
| 466 | + // | |
| 467 | + // The image lives inside the .wp-menu-name title (where the original code | |
| 468 | + // put it) so the <img> renders with its native SVG fills. When the sidebar | |
| 469 | + // is collapsed, WP hides .wp-menu-name (and everything inside it), so a | |
| 470 | + // small JS snippet below clones the same <img> into the .wp-menu-image | |
| 471 | + // slot — which WP keeps visible in both states. We use a real <img> | |
| 472 | + // (not a background-image) on purpose: at small sizes WP's admin renders | |
| 473 | + // background-image SVGs noticeably lighter than the equivalent <img>, | |
| 474 | + // and we want the colored cat in both states. | |
| 475 | + // | |
| 476 | + // The !important rules also override an older "display: none" style that | |
| 477 | + // previous-generation Meow Apps common copies inject for .wp-menu-image; | |
| 478 | + // if any of them load first, ours still wins. | |
| 461 | 479 | add_action( 'admin_head', function () { |
| 462 | 480 | echo '<style> |
| 463 | - #toplevel_page_meowapps-main-menu .wp-menu-image { | |
| 464 | - display: none; | |
| 465 | - } | |
| 466 | - </style>'; | |
| 481 | + #toplevel_page_meowapps-main-menu .meowapps-menu-icon { | |
| 482 | + width: 20px; | |
| 483 | + height: auto; | |
| 484 | + position: absolute; | |
| 485 | + margin-left: -28px; | |
| 486 | + margin-top: 3px; | |
| 487 | + } | |
| 488 | + #toplevel_page_meowapps-main-menu .wp-menu-image { | |
| 489 | + display: block !important; | |
| 490 | + position: relative; | |
| 491 | + } | |
| 492 | + #toplevel_page_meowapps-main-menu .wp-menu-image::before { | |
| 493 | + display: none !important; | |
| 494 | + } | |
| 495 | + #toplevel_page_meowapps-main-menu .wp-menu-image .meowapps-menu-icon-folded { | |
| 496 | + display: none; | |
| 497 | + position: absolute; | |
| 498 | + top: 50%; | |
| 499 | + left: 50%; | |
| 500 | + transform: translate(-50%, calc(-50% - 3px)); | |
| 501 | + width: 20px; | |
| 502 | + height: auto; | |
| 503 | + } | |
| 504 | + body.folded #toplevel_page_meowapps-main-menu .wp-menu-image .meowapps-menu-icon-folded { | |
| 505 | + display: block; | |
| 506 | + } | |
| 507 | + body.folded #toplevel_page_meowapps-main-menu .meowapps-menu-icon { | |
| 508 | + display: none; | |
| 509 | + } | |
| 510 | + @media only screen and (max-width: 960px) { | |
| 511 | + body.auto-fold #toplevel_page_meowapps-main-menu .wp-menu-image .meowapps-menu-icon-folded { | |
| 512 | + display: block; | |
| 513 | + } | |
| 514 | + body.auto-fold #toplevel_page_meowapps-main-menu .meowapps-menu-icon { | |
| 515 | + display: none; | |
| 516 | + } | |
| 517 | + } | |
| 518 | + </style>'; | |
| 519 | + }, 999 ); | |
| 520 | + | |
| 521 | + // Inject a clone of the in-title cat icon into the .wp-menu-image slot. | |
| 522 | + // CSS above shows it only when the sidebar is folded; in the normal | |
| 523 | + // expanded state the .wp-menu-name <img> stays the visible icon. | |
| 524 | + add_action( 'admin_footer', function () { | |
| 525 | + ?> | |
| 526 | + <script> | |
| 527 | + ( function () { | |
| 528 | + var li = document.getElementById( 'toplevel_page_meowapps-main-menu' ); | |
| 529 | + if ( !li ) { return; } | |
| 530 | + var src = li.querySelector( '.meowapps-menu-icon' ); | |
| 531 | + var slot = li.querySelector( '.wp-menu-image' ); | |
| 532 | + if ( !src || !slot || slot.querySelector( '.meowapps-menu-icon-folded' ) ) { return; } | |
| 533 | + var clone = src.cloneNode(); | |
| 534 | + clone.className = 'meowapps-menu-icon-folded'; | |
| 535 | + clone.removeAttribute( 'style' ); | |
| 536 | + slot.appendChild( clone ); | |
| 537 | + } )(); | |
| 538 | + </script> | |
| 539 | + <?php | |
| 467 | 540 | } ); |
| 468 | 541 | } |
| 469 | 542 | |
| 470 | 543 | public function meowapps_hide_dashboard_callback() { |
