Skip to content

Commit 8aeb9d7

Browse files
Chamath-AdithyaChamath-Adithya
committed
feat: Implement responsive mobile navigation with hamburger menu and update styling for get-started steps and section padding.
1 parent b914f9e commit 8aeb9d7

10 files changed

Lines changed: 484 additions & 13 deletions

File tree

‎docs/assets/css/main.css‎

Lines changed: 204 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,123 @@ body {
214214
color: var(--text-color);
215215
}
216216

217+
/* Hamburger Menu */
218+
.hamburger {
219+
display: none;
220+
flex-direction: column;
221+
justify-content: space-between;
222+
width: 30px;
223+
height: 21px;
224+
background: transparent;
225+
border: none;
226+
cursor: pointer;
227+
padding: 0;
228+
z-index: 1001;
229+
}
230+
231+
.hamburger span {
232+
width: 100%;
233+
height: 3px;
234+
background: var(--text-color);
235+
border-radius: 3px;
236+
transition: all 0.3s ease-in-out;
237+
}
238+
239+
/* Mobile Menu Overlay */
240+
.mobile-menu {
241+
position: fixed;
242+
top: 0;
243+
right: -100%;
244+
width: 100%;
245+
height: 100vh;
246+
background: var(--glass-bg);
247+
backdrop-filter: blur(20px);
248+
z-index: 1000;
249+
transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
250+
display: flex;
251+
align-items: center;
252+
justify-content: center;
253+
}
254+
255+
.mobile-menu.active {
256+
right: 0;
257+
}
258+
259+
.mobile-nav-links {
260+
display: flex;
261+
flex-direction: column;
262+
align-items: center;
263+
gap: 2rem;
264+
}
265+
266+
.mobile-nav-links a {
267+
font-size: 1.5rem;
268+
font-weight: 700;
269+
color: var(--text-color);
270+
text-decoration: none;
271+
opacity: 0;
272+
transform: translateY(20px);
273+
transition: all 0.4s ease;
274+
}
275+
276+
.mobile-menu.active .mobile-nav-links a {
277+
opacity: 1;
278+
transform: translateY(0);
279+
}
280+
281+
/* Staggered animation for links */
282+
.mobile-menu.active .mobile-nav-links a:nth-child(1) {
283+
transition-delay: 0.1s;
284+
}
285+
286+
.mobile-menu.active .mobile-nav-links a:nth-child(2) {
287+
transition-delay: 0.2s;
288+
}
289+
290+
.mobile-menu.active .mobile-nav-links a:nth-child(3) {
291+
transition-delay: 0.3s;
292+
}
293+
294+
.mobile-menu.active .mobile-nav-links a:nth-child(4) {
295+
transition-delay: 0.4s;
296+
}
297+
298+
.mobile-menu.active .mobile-nav-links a:nth-child(5) {
299+
transition-delay: 0.5s;
300+
}
301+
302+
.mobile-menu.active .mobile-nav-links a:nth-child(6) {
303+
transition-delay: 0.6s;
304+
}
305+
306+
.mobile-menu.active .mobile-nav-links a:nth-child(7) {
307+
transition-delay: 0.7s;
308+
}
309+
310+
/* Hamburger Animation */
311+
.hamburger.active span:nth-child(1) {
312+
transform: translateY(9px) rotate(45deg);
313+
}
314+
315+
.hamburger.active span:nth-child(2) {
316+
opacity: 0;
317+
}
318+
319+
.hamburger.active span:nth-child(3) {
320+
transform: translateY(-9px) rotate(-45deg);
321+
}
322+
323+
/* Media Queries */
324+
@media (max-width: 768px) {
325+
.nav-links {
326+
display: none;
327+
}
328+
329+
.hamburger {
330+
display: flex;
331+
}
332+
}
333+
217334
/* Theme Toggle */
218335
.theme-toggle {
219336
background: rgba(255, 255, 255, 0.03);
@@ -287,7 +404,7 @@ body {
287404
align-items: center;
288405
justify-content: center;
289406
text-align: center;
290-
padding: 8rem 0;
407+
padding: 6rem 0;
291408
position: relative;
292409
}
293410

@@ -348,7 +465,7 @@ h1 {
348465
display: grid;
349466
grid-template-columns: 1fr 1fr;
350467
align-items: center;
351-
gap: 4rem;
468+
gap: 3rem;
352469
}
353470

354471
.hero-visual {
@@ -528,7 +645,20 @@ h1 {
528645

529646
/* Configurator */
530647
.configurator {
531-
padding: 8rem 0;
648+
padding: 5rem 0;
649+
position: relative;
650+
}
651+
652+
.configurator::before {
653+
content: '';
654+
position: absolute;
655+
top: 0;
656+
left: 0;
657+
width: 100%;
658+
height: 100%;
659+
background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
660+
z-index: -1;
661+
pointer-events: none;
532662
}
533663

534664
.config-container {
@@ -600,6 +730,30 @@ h1 {
600730
color: #f1f5f9;
601731
font-weight: 600;
602732
font-size: 0.9rem;
733+
flex-grow: 1;
734+
}
735+
736+
.copy-btn {
737+
background: rgba(255, 255, 255, 0.1);
738+
border: 1px solid rgba(255, 255, 255, 0.1);
739+
color: #e2e8f0;
740+
padding: 0.4rem 0.8rem;
741+
border-radius: 0.5rem;
742+
font-size: 0.8rem;
743+
display: flex;
744+
align-items: center;
745+
gap: 0.4rem;
746+
cursor: pointer;
747+
transition: all 0.2s;
748+
}
749+
750+
.copy-btn:hover {
751+
background: rgba(255, 255, 255, 0.2);
752+
transform: translateY(-1px);
753+
}
754+
755+
.copy-btn:active {
756+
transform: translateY(0);
603757
}
604758

605759
pre {
@@ -656,11 +810,56 @@ code {
656810
/* Bright Yellow */
657811
}
658812

813+
/* Step Badges */
814+
.step-badge {
815+
display: inline-flex;
816+
align-items: center;
817+
justify-content: center;
818+
width: 2.5rem;
819+
height: 2.5rem;
820+
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
821+
color: white;
822+
border-radius: 50%;
823+
font-size: 1.2rem;
824+
font-weight: 800;
825+
margin-right: 1rem;
826+
box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
827+
vertical-align: middle;
828+
}
829+
659830
.code-type {
660831
color: #e879f9;
661832
/* Bright Purple/Pink */
662833
}
663834

835+
/* Floating Icons */
836+
.floating-icon {
837+
font-size: 3rem;
838+
margin-bottom: 1rem;
839+
display: inline-block;
840+
animation: float-icon 3s ease-in-out infinite;
841+
}
842+
843+
.floating-icon.delay-1 {
844+
animation-delay: 1s;
845+
}
846+
847+
.floating-icon.delay-2 {
848+
animation-delay: 2s;
849+
}
850+
851+
@keyframes float-icon {
852+
853+
0%,
854+
100% {
855+
transform: translateY(0);
856+
}
857+
858+
50% {
859+
transform: translateY(-10px);
860+
}
861+
}
862+
664863
/* Architecture Diagram */
665864
.architecture-diagram {
666865
display: flex;
@@ -700,13 +899,13 @@ code {
700899

701900
/* Features */
702901
.features {
703-
padding: 8rem 0;
902+
padding: 5rem 0;
704903
}
705904

706905
.section-title {
707906
text-align: center;
708907
font-size: 3rem;
709-
margin-bottom: 5rem;
908+
margin-bottom: 3rem;
710909
font-weight: 800;
711910
letter-spacing: -0.03em;
712911
}

‎docs/assets/js/main.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,5 +136,85 @@ document.addEventListener('DOMContentLoaded', () => {
136136

137137
// Run once to set initial state
138138
updateCode();
139+
140+
// Copy to Clipboard Logic
141+
const copyButton = document.getElementById('copyButton');
142+
if (copyButton) {
143+
copyButton.addEventListener('click', () => {
144+
// Get raw text content (without HTML tags)
145+
const textToCopy = codeBlock.textContent;
146+
147+
navigator.clipboard.writeText(textToCopy).then(() => {
148+
const originalText = copyButton.innerHTML;
149+
150+
// Show feedback
151+
copyButton.innerHTML = `
152+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
153+
<polyline points="20 6 9 17 4 12"></polyline>
154+
</svg>
155+
<span>Copied!</span>
156+
`;
157+
copyButton.style.background = 'rgba(74, 222, 128, 0.2)';
158+
copyButton.style.borderColor = 'rgba(74, 222, 128, 0.4)';
159+
copyButton.style.color = '#4ade80';
160+
161+
setTimeout(() => {
162+
copyButton.innerHTML = originalText;
163+
copyButton.style.background = '';
164+
copyButton.style.borderColor = '';
165+
copyButton.style.color = '';
166+
}, 2000);
167+
}).catch(err => {
168+
console.error('Failed to copy:', err);
169+
});
170+
});
171+
}
172+
}
173+
174+
// Mobile Menu Logic
175+
const hamburger = document.querySelector('.hamburger');
176+
const mobileMenu = document.querySelector('.mobile-menu');
177+
const mobileActions = document.querySelector('.mobile-actions');
178+
// const themeToggle = document.getElementById('themeToggle'); // Removed duplicate declaration
179+
180+
if (hamburger && mobileMenu) {
181+
// Clone theme toggle to mobile menu
182+
if (themeToggle && mobileActions) {
183+
const mobileThemeToggle = themeToggle.cloneNode(true);
184+
mobileThemeToggle.id = 'mobileThemeToggle';
185+
mobileThemeToggle.addEventListener('click', () => {
186+
themeToggle.click(); // Trigger original toggle
187+
// Update icon manually for the clone
188+
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
189+
updateThemeIcon(mobileThemeToggle, isDark);
190+
});
191+
mobileActions.appendChild(mobileThemeToggle);
192+
193+
// Initial icon state
194+
const isDark = localStorage.getItem('theme') === 'dark';
195+
updateThemeIcon(mobileThemeToggle, isDark);
196+
}
197+
198+
hamburger.addEventListener('click', () => {
199+
hamburger.classList.toggle('active');
200+
mobileMenu.classList.toggle('active');
201+
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
202+
});
203+
204+
// Close menu when clicking a link
205+
const mobileLinks = document.querySelectorAll('.mobile-nav-links a');
206+
mobileLinks.forEach(link => {
207+
link.addEventListener('click', () => {
208+
hamburger.classList.remove('active');
209+
mobileMenu.classList.remove('active');
210+
document.body.style.overflow = '';
211+
});
212+
});
213+
}
214+
215+
function updateThemeIcon(btn, isDark) {
216+
btn.innerHTML = isDark ?
217+
`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>` :
218+
`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`;
139219
}
140220
});

‎docs/blog.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@
2626
<a href="index.html" class="logo">
2727
WiBLE<span class="dot-logo">.</span>
2828
</a>
29+
30+
<button class="hamburger" aria-label="Toggle Menu">
31+
<span></span>
32+
<span></span>
33+
<span></span>
34+
</button>
35+
2936
<div class="nav-links">
3037
<a href="get-started.html">Start</a>
3138
<a href="documentation.html">Docs</a>
@@ -44,6 +51,22 @@
4451
GitHub
4552
</a>
4653
</div>
54+
55+
<!-- Mobile Menu Overlay -->
56+
<div class="mobile-menu">
57+
<div class="mobile-nav-links">
58+
<a href="get-started.html">Start</a>
59+
<a href="documentation.html">Docs</a>
60+
<a href="examples.html">Examples</a>
61+
<a href="community.html">Community</a>
62+
<a href="blog.html" class="active">Blog</a>
63+
<a href="faq.html">FAQ</a>
64+
<a href="contact.html">Contact</a>
65+
<div class="mobile-actions">
66+
<!-- Theme toggle will be cloned here via JS -->
67+
</div>
68+
</div>
69+
</div>
4770
</div>
4871
</nav>
4972

0 commit comments

Comments
 (0)