Skip to content

Commit 7521d41

Browse files
peterbenoitpeterbenoit
committed
Add mobile navigation functionality and update favicon images
- Implemented mobile navigation toggle functionality in mobile-nav.js - Added event listeners for opening/closing the mobile menu and handling viewport changes - Included new favicon images (16x16, 32x32, and .ico) for improved branding
1 parent 1660d45 commit 7521d41

10 files changed

Lines changed: 185 additions & 11 deletions

‎docs/api.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
69
<title>API Reference - RepoWidget</title>
710
<meta name="description" content="Comprehensive API reference for the RepoWidget library" />
811
<link
@@ -177,6 +180,9 @@
177180
<i class="fa-solid fa-code-branch"></i>
178181
RepoWidget
179182
</a>
183+
<button class="mobile-nav-toggle" aria-label="Toggle navigation menu">
184+
<i class="fa-solid fa-bars"></i>
185+
</button>
180186
<ul class="nav-links">
181187
<li class="nav-link"><a href="./#features">Features</a></li>
182188
<li class="nav-link"><a href="./#getting-started">Getting Started</a></li>
@@ -186,6 +192,7 @@
186192
</ul>
187193
</nav>
188194
</div>
195+
<div class="overlay"></div>
189196
</header>
190197

191198
<section class="section">
@@ -702,5 +709,6 @@ <h3>Resources</h3>
702709
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js"></script>
703710
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.js"></script>
704711
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
712+
<script src="assets/js/mobile-nav.js"></script>
705713
</body>
706714
</html>

‎docs/assets/css/styles.css‎

Lines changed: 121 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -602,24 +602,135 @@ input[type="color"] {
602602
.btn+.btn {
603603
margin-left: 0.5rem;
604604
}
605-
}
606605

607-
@media (max-width: 576px) {
608-
.btn {
606+
.mobile-nav-toggle {
609607
display: block;
608+
z-index: 1000;
609+
}
610+
611+
.nav-links {
612+
position: fixed;
613+
top: 0;
614+
right: -100%;
615+
width: 80%;
616+
max-width: 300px;
617+
height: 100vh;
618+
background-color: var(--primary-color);
619+
flex-direction: column;
620+
justify-content: center;
621+
align-items: center;
622+
transition: right 0.3s ease;
623+
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
624+
z-index: 999;
625+
}
626+
627+
.nav-links.active {
628+
right: 0;
629+
}
630+
631+
.nav-link {
632+
margin: 1rem 0;
633+
}
634+
635+
.nav {
636+
position: relative;
637+
}
638+
639+
.overlay {
640+
display: none;
641+
position: fixed;
642+
top: 0;
643+
left: 0;
610644
width: 100%;
645+
height: 100%;
646+
background-color: rgba(0, 0, 0, 0.5);
647+
z-index: 998;
611648
}
612649

613-
.btn+.btn {
614-
margin-left: 0;
615-
margin-top: 0.75rem;
650+
.overlay.active {
651+
display: block;
652+
}
653+
654+
/* Improve mobile layout for other sections */
655+
.section-title {
656+
font-size: 1.75rem;
657+
}
658+
659+
.section-subtitle {
660+
font-size: 1.1rem;
661+
}
662+
663+
.features {
664+
grid-template-columns: 1fr;
665+
}
666+
667+
.control-row {
668+
flex-direction: column;
669+
}
670+
671+
.control-item {
672+
width: 100%;
673+
margin-bottom: 1rem;
674+
}
675+
676+
.tabs {
677+
flex-direction: column;
678+
}
679+
680+
.tab {
681+
text-align: center;
616682
}
617683

684+
.steps {
685+
flex-direction: column;
686+
}
687+
688+
.step {
689+
width: 100%;
690+
margin-bottom: 2rem;
691+
}
692+
693+
.footer-content {
694+
flex-direction: column;
695+
gap: 2rem;
696+
}
697+
698+
.footer-column {
699+
width: 100%;
700+
}
701+
}
702+
703+
@media (max-width: 576px) {
618704
.hero-actions {
619-
display: flex;
620705
flex-direction: column;
621-
gap: 0.75rem;
622-
max-width: 300px;
623-
margin: 2rem auto 0;
706+
align-items: center;
707+
gap: 1rem;
708+
}
709+
710+
.btn+.btn {
711+
margin-left: 0;
712+
}
713+
714+
.use-cases {
715+
grid-template-columns: 1fr;
624716
}
717+
718+
.docs-table {
719+
font-size: 0.8rem;
720+
}
721+
}
722+
723+
/* Mobile Navigation */
724+
.mobile-nav-toggle {
725+
display: none;
726+
background: none;
727+
border: none;
728+
color: white;
729+
font-size: 1.5rem;
730+
cursor: pointer;
731+
padding: 0.5rem;
732+
}
733+
734+
.mobile-nav-toggle:focus {
735+
outline: none;
625736
}

‎docs/assets/images/android-chrome-192x192.png‎

10.2 KB
Loading

‎docs/assets/images/android-chrome-512x512.png‎

41.9 KB
Loading

‎docs/assets/images/apple-touch-icon.png‎

10.2 KB
Loading

‎docs/assets/images/favicon-16x16.png‎

447 Bytes
Loading

‎docs/assets/images/favicon-32x32.png‎

1.03 KB
Loading

‎docs/assets/images/favicon.ico‎

15 KB
Binary file not shown.

‎docs/assets/js/mobile-nav.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Mobile Navigation Handler for RepoWidget
3+
*/
4+
document.addEventListener('DOMContentLoaded', function () {
5+
const mobileNavToggle = document.querySelector('.mobile-nav-toggle');
6+
const navLinks = document.querySelector('.nav-links');
7+
const overlay = document.querySelector('.overlay');
8+
const navLinkItems = document.querySelectorAll('.nav-link a');
9+
10+
// Function to toggle the mobile menu
11+
function toggleMobileNav() {
12+
navLinks.classList.toggle('active');
13+
overlay.classList.toggle('active');
14+
15+
// Toggle between menu and close icons
16+
const icon = mobileNavToggle.querySelector('i');
17+
if (icon.classList.contains('fa-bars')) {
18+
icon.classList.remove('fa-bars');
19+
icon.classList.add('fa-times');
20+
} else {
21+
icon.classList.remove('fa-times');
22+
icon.classList.add('fa-bars');
23+
}
24+
}
25+
26+
// Toggle menu when hamburger icon is clicked
27+
mobileNavToggle.addEventListener('click', toggleMobileNav);
28+
29+
// Close menu when overlay is clicked
30+
overlay.addEventListener('click', toggleMobileNav);
31+
32+
// Close menu when a nav link is clicked
33+
navLinkItems.forEach(link => {
34+
link.addEventListener('click', function () {
35+
if (navLinks.classList.contains('active')) {
36+
toggleMobileNav();
37+
}
38+
});
39+
});
40+
41+
// Adjust for viewport changes
42+
window.addEventListener('resize', function () {
43+
if (window.innerWidth > 768 && navLinks.classList.contains('active')) {
44+
navLinks.classList.remove('active');
45+
overlay.classList.remove('active');
46+
mobileNavToggle.querySelector('i').classList.remove('fa-times');
47+
mobileNavToggle.querySelector('i').classList.add('fa-bars');
48+
}
49+
});
50+
});

‎docs/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
<i class="fa-solid fa-code-branch"></i>
3333
RepoWidget
3434
</a>
35+
<button class="mobile-nav-toggle" aria-label="Toggle navigation menu">
36+
<i class="fa-solid fa-bars"></i>
37+
</button>
3538
<ul class="nav-links">
3639
<li class="nav-link"><a href="#features">Features</a></li>
3740
<li class="nav-link"><a href="#getting-started">Getting Started</a></li>
@@ -41,6 +44,7 @@
4144
</ul>
4245
</nav>
4346
</div>
47+
<div class="overlay"></div>
4448
</header>
4549

4650
<section class="hero">
@@ -669,5 +673,6 @@ <h3>Resources</h3>
669673
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.js"></script>
670674
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
671675
<script src="assets/js/docs.js"></script>
676+
<script src="assets/js/mobile-nav.js"></script>
672677
</body>
673678
</html>

0 commit comments

Comments
 (0)