Skip to content

Commit c2a3afa

Browse files
CryptoAssassin1CryptoAssassin1
committed
navsearchfix
1 parent 935f63b commit c2a3afa

File tree

2 files changed

+228
-11
lines changed

2 files changed

+228
-11
lines changed

‎index.mdx‎

Lines changed: 193 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,143 @@ mode: "custom"
55

66
import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
77

8+
<style>{`
9+
#custom-nav-links-jsx {
10+
position: fixed !important;
11+
top: 24px !important;
12+
right: 320px !important;
13+
display: flex !important;
14+
flex-direction: row !important;
15+
gap: 20px !important;
16+
align-items: center !important;
17+
z-index: 9999 !important;
18+
pointer-events: auto !important;
19+
height: auto !important;
20+
}
21+
22+
/* Hide navigation when mobile class is added */
23+
#custom-nav-links-jsx.nav-hidden-mobile {
24+
display: none !important;
25+
visibility: hidden !important;
26+
opacity: 0 !important;
27+
pointer-events: none !important;
28+
width: 0 !important;
29+
height: 0 !important;
30+
overflow: hidden !important;
31+
position: absolute !important;
32+
left: -9999px !important;
33+
}
34+
35+
@media (max-width: 900px) {
36+
#custom-nav-links-jsx.custom-nav-responsive,
37+
div#custom-nav-links-jsx.custom-nav-responsive,
38+
.custom-nav-responsive#custom-nav-links-jsx {
39+
display: none !important;
40+
visibility: hidden !important;
41+
opacity: 0 !important;
42+
pointer-events: none !important;
43+
width: 0 !important;
44+
height: 0 !important;
45+
overflow: hidden !important;
46+
}
47+
}
48+
49+
#custom-nav-links-jsx a {
50+
font-size: 12px !important;
51+
font-weight: 500 !important;
52+
text-decoration: none !important;
53+
transition: opacity 0.2s !important;
54+
white-space: nowrap !important;
55+
display: inline-block !important;
56+
}
57+
58+
#custom-nav-links-jsx a:hover {
59+
opacity: 0.7 !important;
60+
}
61+
62+
[data-theme="dark"] #custom-nav-links-jsx a,
63+
html:not([data-theme]) #custom-nav-links-jsx a,
64+
body:not([data-theme]) #custom-nav-links-jsx a {
65+
color: #F1F1F1 !important;
66+
}
67+
68+
[data-theme="light"] #custom-nav-links-jsx a,
69+
body[data-theme="light"] #custom-nav-links-jsx a {
70+
color: #1A1A1A !important;
71+
}
72+
73+
@media (max-width: 1024px) {
74+
#custom-nav-links-jsx {
75+
right: 240px !important;
76+
gap: 16px !important;
77+
}
78+
#custom-nav-links-jsx a {
79+
font-size: 11px !important;
80+
}
81+
}
82+
`}</style>
83+
84+
85+
{/* Custom Navigation Links - Rendered directly as JSX */}
86+
<div id="custom-nav-links-jsx" className="custom-nav-responsive" style={{
87+
position: 'fixed',
88+
top: '24px',
89+
right: '320px',
90+
display: 'flex',
91+
flexDirection: 'row',
92+
gap: '20px',
93+
alignItems: 'center',
94+
zIndex: 9999
95+
}}>
96+
<a href="/sdk/" style={{ fontSize: '12px' }}>Cosmos SDK</a>
97+
<a href="/evm/" style={{ fontSize: '12px' }}>Cosmos EVM</a>
98+
<a href="/ibc/" style={{ fontSize: '12px' }}>IBC</a>
99+
<a href="https://docs.cometbft.com/v0.38/" target="_blank" rel="noopener noreferrer" style={{ fontSize: '12px' }}>CometBFT</a>
100+
<a href="/hub/" style={{ fontSize: '12px' }}>Hub</a>
101+
</div>
102+
8103
<script
9104
dangerouslySetInnerHTML={{
10105
__html: `
106+
// Handle responsive navigation visibility
107+
function handleResponsiveNav() {
108+
const nav = document.getElementById('custom-nav-links-jsx');
109+
if (nav) {
110+
if (window.innerWidth <= 900) {
111+
// Force hide by directly setting style properties
112+
nav.style.display = 'none';
113+
nav.style.visibility = 'hidden';
114+
nav.style.opacity = '0';
115+
nav.style.pointerEvents = 'none';
116+
nav.style.position = 'absolute';
117+
nav.style.left = '-9999px';
118+
} else {
119+
// Restore original styles
120+
nav.style.display = 'flex';
121+
nav.style.visibility = 'visible';
122+
nav.style.opacity = '1';
123+
nav.style.pointerEvents = 'auto';
124+
nav.style.position = 'fixed';
125+
nav.style.left = '';
126+
}
127+
}
128+
}
129+
130+
if (typeof window !== 'undefined') {
131+
// Run immediately
132+
handleResponsiveNav();
133+
134+
// Run multiple times to ensure it catches any delays
135+
setTimeout(handleResponsiveNav, 50);
136+
setTimeout(handleResponsiveNav, 100);
137+
setTimeout(handleResponsiveNav, 200);
138+
setTimeout(handleResponsiveNav, 500);
139+
140+
window.addEventListener('resize', handleResponsiveNav);
141+
window.addEventListener('load', handleResponsiveNav);
142+
document.addEventListener('DOMContentLoaded', handleResponsiveNav);
143+
}
144+
11145
(function() {
12146
// Navigation management for index page
13147
const indexNavManager = {
@@ -39,7 +173,10 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
39173
display: flex !important;
40174
gap: 24px !important;
41175
align-items: center !important;
42-
z-index: 1000 !important;
176+
z-index: 9999 !important;
177+
pointer-events: auto !important;
178+
visibility: visible !important;
179+
opacity: 1 !important;
43180
}
44181
45182
#custom-nav-links a {
@@ -62,7 +199,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
62199
color: #1A1A1A !important;
63200
}
64201
65-
@media (max-width: 768px) {
202+
@media (max-width: 900px) {
66203
#custom-nav-links {
67204
display: none !important;
68205
}
@@ -94,8 +231,22 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
94231
},
95232
96233
injectCustomNav() {
234+
console.log('[Custom Nav] Attempting to inject custom navigation');
235+
97236
// Check if already injected
98-
if (document.getElementById(this.customNavId)) return;
237+
if (document.getElementById(this.customNavId)) {
238+
console.log('[Custom Nav] Already exists, skipping');
239+
return;
240+
}
241+
242+
// Ensure body exists
243+
if (!document.body) {
244+
console.log('[Custom Nav] Body not ready, retrying...');
245+
setTimeout(() => this.injectCustomNav(), 50);
246+
return;
247+
}
248+
249+
console.log('[Custom Nav] Creating navigation container');
99250
100251
// Create custom navigation container
101252
const navContainer = document.createElement('div');
@@ -124,6 +275,20 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
124275
125276
// Append directly to body (using fixed positioning)
126277
document.body.appendChild(navContainer);
278+
console.log('[Custom Nav] Navigation container appended to body');
279+
280+
// Force visibility
281+
setTimeout(() => {
282+
const nav = document.getElementById(this.customNavId);
283+
if (nav) {
284+
nav.style.display = 'flex';
285+
nav.style.visibility = 'visible';
286+
nav.style.opacity = '1';
287+
console.log('[Custom Nav] Visibility forced, navigation should be visible');
288+
} else {
289+
console.error('[Custom Nav] Navigation element not found after injection!');
290+
}
291+
}, 100);
127292
},
128293
129294
removeCustomNav() {
@@ -155,7 +320,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
155320
} else {
156321
this.cleanup();
157322
}
158-
}, 500);
323+
}, 200);
159324
}
160325
} else {
161326
this.cleanup();
@@ -203,12 +368,26 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
203368
},
204369
205370
init() {
206-
// Initial setup
371+
console.log('[Custom Nav] Initializing navigation manager');
372+
console.log('[Custom Nav] Current pathname:', window.location.pathname);
373+
console.log('[Custom Nav] Is index page:', this.isIndexPage());
374+
375+
// Initial setup - run multiple times with delays
207376
this.manageNavigation();
377+
setTimeout(() => this.manageNavigation(), 100);
378+
setTimeout(() => this.manageNavigation(), 300);
379+
setTimeout(() => this.manageNavigation(), 500);
380+
setTimeout(() => this.manageNavigation(), 1000);
208381
209382
// Set up event listeners
210-
document.addEventListener('DOMContentLoaded', () => this.manageNavigation());
211-
window.addEventListener('load', () => this.manageNavigation());
383+
document.addEventListener('DOMContentLoaded', () => {
384+
this.manageNavigation();
385+
setTimeout(() => this.manageNavigation(), 100);
386+
});
387+
window.addEventListener('load', () => {
388+
this.manageNavigation();
389+
setTimeout(() => this.manageNavigation(), 100);
390+
});
212391
window.addEventListener('popstate', () => this.manageNavigation());
213392
214393
// Intercept navigation
@@ -223,7 +402,9 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
223402
}
224403
});
225404
226-
urlObserver.observe(document, { subtree: true, childList: true });
405+
if (document.documentElement) {
406+
urlObserver.observe(document.documentElement, { subtree: true, childList: true });
407+
}
227408
}
228409
};
229410
@@ -253,10 +434,11 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
253434
visibility: hidden !important;
254435
opacity: 0 !important;
255436
}
437+
256438
`}</style>
257439

258440
<script>{`
259-
// Aggressive navigation hiding
441+
// Aggressive navigation hiding (excluding search bar - handled by CSS)
260442
function hideNavElements() {
261443
const selectors = [
262444
'.nav-tabs',
@@ -269,7 +451,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
269451
'button.group',
270452
'button[class*="bg-background-light"]',
271453
'button[class*="bg-background-dark"]',
272-
'header button:not([aria-label*="theme"]):not([aria-label*="Theme"])',
454+
'header button:not([aria-label*="theme"]):not([aria-label*="Theme"]):not([id="search-bar-entry"])',
273455
'header a.link',
274456
'header .link',
275457
'[class*="rounded-full"]:not([aria-label*="theme"]):not([aria-label*="Theme"])',
@@ -971,7 +1153,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
9711153
transition: 'all 0.2s',
9721154
}}
9731155
>
974-
Get in Touch with Cosmos Lab →
1156+
Get in Touch with Cosmos Labs →
9751157
</a>
9761158
</section>
9771159
</div>

‎style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,41 @@
99
border-bottom: 1px solid rgba(204, 204, 204, 0.2);
1010
}
1111

12+
/* Hide search bar ONLY on landing page (index.mdx) */
13+
/* Use :has() selector to check if custom-index-content exists on page */
14+
body:has(#custom-index-content) button#search-bar-entry,
15+
body:has(#custom-index-content) button#search-bar-entry-mobile,
16+
body:has(#custom-index-content) #search-bar-entry,
17+
body:has(#custom-index-content) #search-bar-entry-mobile {
18+
display: none !important;
19+
visibility: hidden !important;
20+
opacity: 0 !important;
21+
width: 0 !important;
22+
height: 0 !important;
23+
position: absolute !important;
24+
left: -99999px !important;
25+
pointer-events: none !important;
26+
}
27+
28+
/* Hide custom navigation at 900px and below */
29+
@media (max-width: 900px) {
30+
#custom-nav-links-jsx,
31+
div#custom-nav-links-jsx,
32+
div#custom-nav-links-jsx[style],
33+
#custom-nav-links-jsx.custom-nav-responsive,
34+
div#custom-nav-links-jsx.custom-nav-responsive[style] {
35+
display: none !important;
36+
visibility: hidden !important;
37+
opacity: 0 !important;
38+
pointer-events: none !important;
39+
position: absolute !important;
40+
left: -99999px !important;
41+
width: 0 !important;
42+
height: 0 !important;
43+
overflow: hidden !important;
44+
}
45+
}
46+
1247
/* Mobile: Hide navigation elements */
1348
@media (max-width: 768px) {
1449
/* Hide the "Cosmos Stack Developer Documentation" text */

0 commit comments

Comments
 (0)