Skip to content

Commit 8edb887

Browse files
omarsarclaude
andcommitted
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>
1 parent 4e3d871 commit 8edb887

3 files changed

Lines changed: 31 additions & 3 deletions

File tree

components/AnnouncementBar.tsx

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import Link from 'next/link';
33

44
const AnnouncementBar: React.FC = () => {
5+
const [isMenuOpen, setIsMenuOpen] = useState(false);
6+
7+
useEffect(() => {
8+
// Watch for Nextra's mobile menu state by observing body classes
9+
const observer = new MutationObserver(() => {
10+
// Nextra adds nx-overflow-hidden class to body when menu is open
11+
const hasOverflowHidden = document.body.classList.contains('nx-overflow-hidden');
12+
setIsMenuOpen(hasOverflowHidden);
13+
});
14+
15+
observer.observe(document.body, {
16+
attributes: true,
17+
attributeFilter: ['class'],
18+
});
19+
20+
return () => observer.disconnect();
21+
}, []);
22+
523
return (
624
<div
25+
className="announcement-bar"
726
style={{
827
width: '100%',
928
backgroundColor: '#8b5cf6',
@@ -12,6 +31,7 @@ const AnnouncementBar: React.FC = () => {
1231
textAlign: 'center',
1332
fontSize: '0.9rem',
1433
borderBottom: '1px solid #7c3aed',
34+
display: isMenuOpen ? 'none' : 'block',
1535
}}
1636
>
1737
🚀 Master building AI workflows and agents with Claude Code! Use <strong style={{ fontWeight: 'bold' }}>AGENTX20</strong> for 20% off{' '}

pages/style.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
pre { white-space: pre-wrap; }
1+
pre { white-space: pre-wrap; }
2+
3+
/* Mobile responsive styles */
4+
@media (max-width: 768px) {
5+
/* Hide logo text on mobile, show only icon */
6+
.logo-text {
7+
display: none;
8+
}
9+
}

theme.config.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const config: DocsThemeConfig = {
1313
<circle cx="40" cy="206" r="40" fill="currentColor"/>
1414
<circle cx="166" cy="120" r="40" fill="currentColor"/>
1515
</svg>
16-
<span style={{ marginLeft: '.4em', fontWeight: 800 }}>
16+
<span className="logo-text" style={{ marginLeft: '.4em', fontWeight: 800 }}>
1717
Prompt Engineering Guide
1818
</span>
1919
</>

0 commit comments

Comments
 (0)