Skip to content

Commit 4ca3a12

Browse files
ravindu644ravindu644
committed
feat: implement responsive navigation with mobile menu and update logo branding
1 parent 8b5d84b commit 4ca3a12

2 files changed

Lines changed: 119 additions & 31 deletions

File tree

‎index.html‎

Lines changed: 69 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,49 @@
2626

2727
<nav>
2828
<div class="container" style="display: flex; align-items: center; justify-content: space-between; height: 100%;">
29-
<a href="/" class="nav-logo">droidspaces</a>
30-
<ul class="nav-links">
31-
<li><a href="#features">Features</a></li>
32-
<li><a href="https://github.com/ravindu644/Droidspaces-OSS">GitHub</a></li>
33-
<li><a href="https://t.me/Droidspaces">Telegram</a></li>
34-
<li>
35-
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
36-
<svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
37-
style="display:none">
38-
<circle cx="12" cy="12" r="5"></circle>
39-
<line x1="12" y1="1" x2="12" y2="3"></line>
40-
<line x1="12" y1="21" x2="12" y2="23"></line>
41-
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
42-
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
43-
<line x1="1" y1="12" x2="3" y2="12"></line>
44-
<line x1="21" y1="12" x2="23" y2="12"></line>
45-
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
46-
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
47-
</svg>
48-
<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
49-
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
50-
</svg>
51-
</button>
52-
</li>
53-
</ul>
29+
<a href="/" class="nav-logo">
30+
<svg class="logo-icon" viewBox="8.25 10.35 31.5 27.3" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
31+
<path
32+
d="M36.85 30.16H11.15c-0.82 0 -1.48 0.68 -1.48 1.52v3.05c0 0.84 0.66 1.52 1.48 1.52h25.69c0.82 0 1.48 -0.68 1.48 -1.52v-3.05c0 -0.84 -0.66 -1.52 -1.48 -1.52ZM12.58 34.97c-0.95 0 -1.73 -0.79 -1.73 -1.77s0.77 -1.77 1.73 -1.77 1.73 0.79 1.73 1.77 -0.77 1.77 -1.73 1.77Z" />
33+
<path
34+
d="M36.85 21.00H11.15c-0.82 0 -1.48 0.68 -1.48 1.52v3.05c0 0.84 0.66 1.52 1.48 1.52h25.69c0.82 0 1.48 -0.68 1.48 -1.52v-3.05c0 -0.84 -0.66 -1.52 -1.48 -1.52ZM12.58 25.82c-0.95 0 -1.73 -0.79 -1.73 -1.77s0.77 -1.77 1.73 -1.77 1.73 0.79 1.73 1.77 -0.77 1.77 -1.73 1.77Z" />
35+
<path
36+
d="M36.84 11.74H11.15c-0.82 0 -1.48 0.68 -1.48 1.52v3.05c0 0.84 0.66 1.52 1.48 1.52h25.69c0.82 0 1.48 -0.68 1.48 -1.52v-3.05c0 -0.84 -0.66 -1.52 -1.48 -1.52ZM12.58 16.57c-0.95 0 -1.73 -0.79 -1.73 -1.77s0.77 -1.77 1.73 -1.77 1.73 0.79 1.73 1.77 -0.77 1.77 -1.73 1.77Z" />
37+
</svg>
38+
<span class="logo-text">Droidspaces</span>
39+
</a>
40+
<div style="display: flex; align-items: center; gap: 0.5rem;">
41+
<button class="mobile-menu-btn" id="menu-toggle" aria-label="Menu">
42+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
43+
<rect x="3" y="3" width="7" height="7"></rect>
44+
<rect x="14" y="3" width="7" height="7"></rect>
45+
<rect x="14" y="14" width="7" height="7"></rect>
46+
<rect x="3" y="14" width="7" height="7"></rect>
47+
</svg>
48+
</button>
49+
<ul class="nav-links" id="nav-links">
50+
<li><a href="#features">Features</a></li>
51+
<li><a href="https://github.com/ravindu644/Droidspaces-OSS">GitHub</a></li>
52+
<li><a href="https://t.me/Droidspaces">Telegram</a></li>
53+
</ul>
54+
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
55+
<svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
56+
style="display:none">
57+
<circle cx="12" cy="12" r="5"></circle>
58+
<line x1="12" y1="1" x2="12" y2="3"></line>
59+
<line x1="12" y1="21" x2="12" y2="23"></line>
60+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
61+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
62+
<line x1="1" y1="12" x2="3" y2="12"></line>
63+
<line x1="21" y1="12" x2="23" y2="12"></line>
64+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
65+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
66+
</svg>
67+
<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
68+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
69+
</svg>
70+
</button>
71+
</div>
5472
</div>
5573
</nav>
5674

@@ -75,7 +93,7 @@ <h1>
7593
~300KB binary. Zero dependencies.
7694
</p>
7795
<div class="hero-cta">
78-
<a href="https://github.com/ravindu644/Droidspaces-OSS/releases" class="btn btn-primary">↓ Download</a>
96+
<a href="https://github.com/ravindu644/Droidspaces-OSS/releases/latest" class="btn btn-primary">↓ Download</a>
7997
<a href="https://github.com/ravindu644/Droidspaces-OSS/blob/main/Documentation/Installation-Android.md"
8098
class="btn btn-ghost">Get Started →</a>
8199
</div>
@@ -374,7 +392,7 @@ <h3>Linux</h3>
374392
<h2>Ready to run real containers?</h2>
375393
<p class="section-desc">Download the APK or read the docs to get up and running in minutes.</p>
376394
<div class="cta-btns">
377-
<a href="https://github.com/ravindu644/Droidspaces-OSS/releases/latest" class="btn btn-primary">Download APK</a>
395+
<a href="https://github.com/ravindu644/Droidspaces-OSS/releases/latest" class="btn btn-primary">↓ Download</a>
378396
<a href="https://github.com/ravindu644/Droidspaces-OSS" class="btn btn-ghost">GitHub</a>
379397
<a href="https://t.me/Droidspaces" class="btn btn-ghost">Telegram</a>
380398
</div>
@@ -498,6 +516,30 @@ <h2>Ready to run real containers?</h2>
498516
localStorage.setItem('theme', newTheme);
499517
applyTheme(newTheme);
500518
});
519+
520+
// Mobile Menu Toggle
521+
const menuToggle = document.getElementById('menu-toggle');
522+
const navLinks = document.getElementById('nav-links');
523+
524+
menuToggle.addEventListener('click', (e) => {
525+
e.stopPropagation();
526+
navLinks.classList.toggle('active');
527+
menuToggle.classList.toggle('active');
528+
});
529+
530+
document.addEventListener('click', (e) => {
531+
if (!navLinks.contains(e.target) && !menuToggle.contains(e.target)) {
532+
navLinks.classList.remove('active');
533+
menuToggle.classList.remove('active');
534+
}
535+
});
536+
537+
navLinks.querySelectorAll('a').forEach(link => {
538+
link.addEventListener('click', () => {
539+
navLinks.classList.remove('active');
540+
menuToggle.classList.remove('active');
541+
});
542+
});
501543
})();
502544
</script>
503545
</body>

‎style.css‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,31 @@
115115
}
116116
}
117117
.nav-logo {
118+
display: flex !important;
119+
align-items: center !important;
120+
gap: 0.6rem;
121+
text-decoration: none;
122+
transition: opacity 0.15s;
123+
flex-shrink: 0;
124+
}
125+
.nav-logo:hover { opacity: 0.8; }
126+
.logo-icon {
127+
width: 20px;
128+
height: 20px;
129+
color: var(--accent2);
130+
flex-shrink: 0;
131+
}
132+
.logo-text {
118133
font-family: var(--mono);
119-
font-size: 1rem;
134+
font-size: 1.1rem;
120135
font-weight: 700;
121136
color: var(--accent2);
122-
text-decoration: none;
123137
letter-spacing: -0.02em;
138+
display: block !important; /* Force visibility */
139+
transform: translateY(-1px);
140+
white-space: nowrap;
124141
}
125-
.nav-links { display: flex; gap: 0.25rem; list-style: none; }
142+
.nav-links { display: flex; gap: 0.25rem; list-style: none; align-items: center; }
126143
.nav-links a {
127144
padding: 0.35rem 0.75rem;
128145
border-radius: 6px;
@@ -134,9 +151,21 @@
134151
}
135152
.nav-links a:hover { color: var(--text); background: var(--bg3); }
136153

154+
.mobile-menu-btn {
155+
display: none !important;
156+
background: none;
157+
border: none;
158+
color: var(--muted);
159+
cursor: pointer;
160+
padding: 0.5rem;
161+
margin: 0;
162+
line-height: 0;
163+
}
164+
.mobile-menu-btn svg { width: 24px; height: 24px; }
165+
137166
/* HERO */
138167
.hero {
139-
padding: 10rem 2rem 4rem;
168+
padding: 6rem 2rem 4rem;
140169
position: relative;
141170
overflow: hidden;
142171
}
@@ -432,6 +461,23 @@
432461

433462
/* RESPONSIVE */
434463
@media (max-width: 768px) {
464+
.mobile-menu-btn { display: flex !important; }
465+
.nav-links {
466+
display: none;
467+
position: absolute;
468+
top: 56px;
469+
left: 0;
470+
right: 0;
471+
background: var(--bg);
472+
border-bottom: 1px solid var(--border);
473+
flex-direction: column;
474+
padding: 1rem;
475+
gap: 0.5rem;
476+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
477+
}
478+
.nav-links.active { display: flex; }
479+
.nav-links a { width: 100%; text-align: left; padding: 0.75rem; }
480+
435481
.hero-inner { grid-template-columns: 1fr; gap: 3rem; }
436482
.terminal { display: none; }
437483
.features-grid { grid-template-columns: 1fr; }

0 commit comments

Comments
 (0)