Skip to content

Commit 0fb0fb9

Browse files
k-arindamk-arindam
authored
Implement mobile sidebar and hamburger menu
Add mobile sidebar and hamburger menu functionality.
1 parent 157811f commit 0fb0fb9

File tree

1 file changed

+190
-0
lines changed

1 file changed

+190
-0
lines changed

‎index.html‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454

5555
html {
5656
scroll-behavior: smooth;
57+
scroll-padding-top: 80px;
5758
}
5859

5960
body {
@@ -822,6 +823,143 @@
822823
color: var(--primary-light);
823824
}
824825

826+
/* ─── Mobile Hamburger ─── */
827+
.hamburger {
828+
display: none;
829+
background: none;
830+
border: none;
831+
cursor: pointer;
832+
padding: 0.5rem;
833+
z-index: 200;
834+
}
835+
836+
.hamburger span {
837+
display: block;
838+
width: 18px;
839+
height: 2px;
840+
background: var(--text-primary);
841+
margin: 4px 0;
842+
border-radius: 2px;
843+
transition: all 0.3s ease;
844+
}
845+
846+
.hamburger.active span:nth-child(1) {
847+
transform: rotate(45deg) translate(5px, 5px);
848+
}
849+
850+
.hamburger.active span:nth-child(2) {
851+
opacity: 0;
852+
}
853+
854+
.hamburger.active span:nth-child(3) {
855+
transform: rotate(-45deg) translate(5px, -5px);
856+
}
857+
858+
/* ─── Sidebar Overlay ─── */
859+
.sidebar-overlay {
860+
position: fixed;
861+
inset: 0;
862+
background: rgba(0, 0, 0, 0.6);
863+
z-index: 150;
864+
opacity: 0;
865+
visibility: hidden;
866+
transition: all 0.3s ease;
867+
backdrop-filter: blur(4px);
868+
-webkit-backdrop-filter: blur(4px);
869+
}
870+
871+
.sidebar-overlay.active {
872+
opacity: 1;
873+
visibility: visible;
874+
}
875+
876+
/* ─── Mobile Sidebar ─── */
877+
.sidebar {
878+
position: fixed;
879+
top: 0;
880+
right: -280px;
881+
width: 280px;
882+
height: 100vh;
883+
background: var(--bg-card);
884+
border-left: 1px solid var(--border-subtle);
885+
z-index: 200;
886+
transition: right 0.3s ease;
887+
display: flex;
888+
flex-direction: column;
889+
padding: 1.5rem;
890+
}
891+
892+
.sidebar.active {
893+
right: 0;
894+
}
895+
896+
.sidebar-header {
897+
display: flex;
898+
align-items: center;
899+
justify-content: space-between;
900+
margin-bottom: 2rem;
901+
padding-bottom: 1rem;
902+
border-bottom: 1px solid var(--border-subtle);
903+
}
904+
905+
.sidebar-header .brand {
906+
font-weight: 700;
907+
font-size: 1rem;
908+
color: var(--text-primary);
909+
letter-spacing: -0.02em;
910+
}
911+
912+
.sidebar-close {
913+
background: none;
914+
border: none;
915+
color: var(--text-muted);
916+
font-size: 1.5rem;
917+
cursor: pointer;
918+
padding: 0.25rem;
919+
line-height: 1;
920+
transition: color 0.2s;
921+
}
922+
923+
.sidebar-close:hover {
924+
color: var(--text-primary);
925+
}
926+
927+
.sidebar-nav {
928+
list-style: none;
929+
display: flex;
930+
flex-direction: column;
931+
gap: 0.25rem;
932+
}
933+
934+
.sidebar-nav a {
935+
display: block;
936+
color: var(--text-secondary);
937+
text-decoration: none;
938+
font-size: 0.95rem;
939+
font-weight: 500;
940+
padding: 0.75rem 1rem;
941+
border-radius: 10px;
942+
transition: all 0.2s;
943+
}
944+
945+
.sidebar-nav a:hover {
946+
color: var(--primary-light);
947+
background: rgba(0, 191, 165, 0.08);
948+
}
949+
950+
.sidebar-nav .sidebar-cta {
951+
margin-top: 0.75rem;
952+
background: var(--primary);
953+
color: var(--bg-deep);
954+
text-align: center;
955+
font-weight: 600;
956+
border-radius: 10px;
957+
}
958+
959+
.sidebar-nav .sidebar-cta:hover {
960+
background: var(--primary-light);
961+
}
962+
825963
/* ─── Scrollable Table Wrapper ─── */
826964
.table-scroll {
827965
overflow-x: auto;
@@ -840,6 +978,10 @@
840978
display: none;
841979
}
842980

981+
.hamburger {
982+
display: block;
983+
}
984+
843985
.hero {
844986
padding: 7rem 0 3rem;
845987
}
@@ -1004,9 +1146,31 @@
10041146
<li><a href="#status">Status</a></li>
10051147
<li><a href="https://github.com/renderprotocol" class="nav-cta" target="_blank">GitHub ↗</a></li>
10061148
</ul>
1149+
<button class="hamburger" id="hamburgerBtn" aria-label="Open menu">
1150+
<span></span>
1151+
<span></span>
1152+
<span></span>
1153+
</button>
10071154
</div>
10081155
</nav>
10091156

1157+
<!-- Mobile Sidebar -->
1158+
<div class="sidebar-overlay" id="sidebarOverlay"></div>
1159+
<div class="sidebar" id="sidebar">
1160+
<div class="sidebar-header">
1161+
<span class="brand">Render Protocol</span>
1162+
<button class="sidebar-close" id="sidebarClose" aria-label="Close menu">&times;</button>
1163+
</div>
1164+
<ul class="sidebar-nav">
1165+
<li><a href="#vision" class="sidebar-link">Vision</a></li>
1166+
<li><a href="#architecture" class="sidebar-link">Architecture</a></li>
1167+
<li><a href="#repos" class="sidebar-link">Repositories</a></li>
1168+
<li><a href="#roadmap" class="sidebar-link">Roadmap</a></li>
1169+
<li><a href="#status" class="sidebar-link">Status</a></li>
1170+
<li><a href="https://github.com/renderprotocol" class="sidebar-cta" target="_blank">GitHub ↗</a></li>
1171+
</ul>
1172+
</div>
1173+
10101174
<main>
10111175

10121176
<!-- Hero -->
@@ -1555,6 +1719,32 @@ <h2>🌱 Project Status</h2>
15551719
</div>
15561720
</footer>
15571721

1722+
<script>
1723+
const hamburger = document.getElementById('hamburgerBtn');
1724+
const sidebar = document.getElementById('sidebar');
1725+
const overlay = document.getElementById('sidebarOverlay');
1726+
const closeBtn = document.getElementById('sidebarClose');
1727+
const sidebarLinks = document.querySelectorAll('.sidebar-link');
1728+
1729+
function openSidebar() {
1730+
sidebar.classList.add('active');
1731+
overlay.classList.add('active');
1732+
hamburger.classList.add('active');
1733+
document.body.style.overflow = 'hidden';
1734+
}
1735+
1736+
function closeSidebar() {
1737+
sidebar.classList.remove('active');
1738+
overlay.classList.remove('active');
1739+
hamburger.classList.remove('active');
1740+
document.body.style.overflow = '';
1741+
}
1742+
1743+
hamburger.addEventListener('click', openSidebar);
1744+
closeBtn.addEventListener('click', closeSidebar);
1745+
overlay.addEventListener('click', closeSidebar);
1746+
sidebarLinks.forEach(link => link.addEventListener('click', closeSidebar));
1747+
</script>
15581748
</body>
15591749

15601750
</html>

0 commit comments

Comments
 (0)