pratik/engineeringbuild-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update website

Browse Source
This commit is contained in:
Pratik
2026-06-09 20:17:22 +10:00
parent 978f5d1e6a
commit 9ec53f5a28
8 changed files with 111 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
contact.html
View File

@@ -12,6 +12,11 @@
<a class="brand" href="index.html">EngineeringBuild</a>
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
</div>
<button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="site-nav" aria-label="Primary">
<a href="index.html">Home</a>
</nav>

5
guides/embedded.html
View File

@@ -12,6 +12,11 @@
<a class="brand" href="../index.html">EngineeringBuild</a>
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
</div>
<button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="site-nav" aria-label="Primary">
<a href="../index.html">Home</a>
<a href="../contact.html">Contact</a>

5
guides/linux.html
View File

@@ -12,6 +12,11 @@
<a class="brand" href="../index.html">EngineeringBuild</a>
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
</div>
<button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="site-nav" aria-label="Primary">
<a href="../index.html">Home</a>
<a href="../contact.html">Contact</a>

5
guides/networking.html
View File

@@ -12,6 +12,11 @@
<a class="brand" href="../index.html">EngineeringBuild</a>
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
</div>
<button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="site-nav" aria-label="Primary">
<a href="../index.html">Home</a>
<a href="../contact.html">Contact</a>

5
guides/telecommunications.html
View File

@@ -12,6 +12,11 @@
<a class="brand" href="../index.html">EngineeringBuild</a>
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
</div>
<button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="site-nav" aria-label="Primary">
<a href="../index.html">Home</a>
<a href="../contact.html">Contact</a>

6
index.html
View File

@@ -30,6 +30,12 @@
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
</div>
<button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="site-nav" aria-label="Primary">
<div class="nav-group">
<button class="nav-trigger" type="button" aria-haspopup="true">Services</button>

43
main.css
View File

@@ -60,6 +60,10 @@ a {
flex-wrap: wrap;
}
.menu-toggle {
display: none;
}
.site-nav > a,
.nav-trigger {
font-size: 0.92rem;
@@ -406,15 +410,50 @@ a {
@media (max-width: 720px) {
.site-header {
flex-direction: column;
align-items: flex-start;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
.menu-toggle {
display: inline-grid;
gap: 5px;
width: 44px;
height: 44px;
place-content: center;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 20px;
height: 2px;
background: #111827;
}
.site-nav {
display: flex;
grid-column: 1 / -1;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 4px;
max-height: 0;
overflow: hidden;
padding-top: 0;
opacity: 0;
pointer-events: none;
transition: max-height 0.25s ease, opacity 0.2s ease, padding-top 0.2s ease;
}
.site-nav.is-open {
max-height: 700px;
padding-top: 12px;
opacity: 1;
pointer-events: auto;
}
.site-nav > a,

41
main.js
View File

@@ -16,6 +16,12 @@ function renderSiteHeader(root) {
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
</div>
<button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="site-nav" aria-label="Primary">
<a href="${root}index.html">Home</a>
@@ -84,6 +90,21 @@ document.querySelectorAll('[data-include="site-footer"]').forEach((target) => {
const mobileMenuQuery = window.matchMedia('(max-width: 720px)');
document.querySelectorAll('.menu-toggle').forEach((toggle) => {
const header = toggle.closest('.site-header');
const nav = header?.querySelector('.site-nav');
toggle.addEventListener('click', () => {
const isOpen = nav.classList.toggle('is-open');
toggle.setAttribute('aria-expanded', String(isOpen));
toggle.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
if (!isOpen) {
closeMobileMenus();
}
});
});
function closeMobileMenus() {
document.querySelectorAll('.nav-group.is-open').forEach((group) => {
group.classList.remove('is-open');
@@ -113,11 +134,27 @@ document.querySelectorAll('.nav-trigger').forEach((trigger) => {
});
document.addEventListener('click', (event) => {
if (!mobileMenuQuery.matches || event.target.closest('.site-nav')) {
if (!mobileMenuQuery.matches || event.target.closest('.site-header')) {
return;
}
document.querySelectorAll('.site-nav.is-open').forEach((nav) => {
nav.classList.remove('is-open');
});
document.querySelectorAll('.menu-toggle').forEach((toggle) => {
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open menu');
});
closeMobileMenus();
});
mobileMenuQuery.addEventListener('change', closeMobileMenus);
mobileMenuQuery.addEventListener('change', () => {
document.querySelectorAll('.site-nav.is-open').forEach((nav) => {
nav.classList.remove('is-open');
});
document.querySelectorAll('.menu-toggle').forEach((toggle) => {
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open menu');
});
closeMobileMenus();
});