Fix mobile UI issues: hide logo text and announcement bar on menu open

- Hide "Prompt Engineering Guide" text on mobile, show only logo icon
- Hide announcement bar when mobile hamburger menu is opened to prevent
  black empty space at top of menu overlay
- Use MutationObserver to detect Nextra's nx-overflow-hidden class on body

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

components/AnnouncementBar.tsx

@@ -1,9 +1,28 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 
 const AnnouncementBar: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    // Watch for Nextra's mobile menu state by observing body classes
+    const observer = new MutationObserver(() => {
+      // Nextra adds nx-overflow-hidden class to body when menu is open
+      const hasOverflowHidden = document.body.classList.contains('nx-overflow-hidden');
+      setIsMenuOpen(hasOverflowHidden);
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div
+      className="announcement-bar"
       style={{
         width: '100%',
         backgroundColor: '#8b5cf6',
@@ -12,6 +31,7 @@ const AnnouncementBar: React.FC = () => {
         textAlign: 'center',
         fontSize: '0.9rem',
         borderBottom: '1px solid #7c3aed',
+        display: isMenuOpen ? 'none' : 'block',
       }}
     >
       🚀 Master building AI workflows and agents with Claude Code! Use <strong style={{ fontWeight: 'bold' }}>AGENTX20</strong> for 20% off{' '}

pages/style.css

@@ -1 +1,9 @@
-pre { white-space: pre-wrap; }
+pre { white-space: pre-wrap; }
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  /* Hide logo text on mobile, show only icon */
+  .logo-text {
+    display: none;
+  }
+}

theme.config.tsx

@@ -13,7 +13,7 @@ const config: DocsThemeConfig = {
         <circle cx="40" cy="206" r="40" fill="currentColor"/>
         <circle cx="166" cy="120" r="40" fill="currentColor"/>
       </svg>
-      <span style={{ marginLeft: '.4em', fontWeight: 800 }}>
+      <span className="logo-text" style={{ marginLeft: '.4em', fontWeight: 800 }}>
         Prompt Engineering Guide
       </span>
     </>