Cyper/CyBySide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Finished initial layout
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Cyper
2025-07-26 21:50:14 -04:00
parent 6c1af5a098
commit 4ee6c9519c
2 changed files with 158 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/_includes/layout.html
View File

@ -44,7 +44,7 @@
</head>
<body>
<header>
<nav class="container h-100" aria-label="Main nav">
<nav class="container nav h-100" aria-label="Main nav">
<div class="nav-logo">
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
</div>
@ -79,6 +79,35 @@
</ul>
</div>
</nav>
<nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
<div class="mobile-nav-header">
<h1>{{ metadata.title }}</h1>
<button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
<ion-icon name="close-sharp"></ion-icon>
</button>
</div>
<div class="mobile-nav-links">
<ul>
<li>
<a href="/">
<ion-icon name="home-sharp"></ion-icon>
<span>Home</span>
</a>
</li>
<li>
<a href="/posts">
<ion-icon name="newspaper-sharp"></ion-icon>
<span>Posts</span>
</a>
</li>
<li>
<a href="/about">
<ion-icon name="help-circle-sharp"></ion-icon>
<span>About</span>
</a>
</li>
</ul>
</div>
</header>
<main>
<div>
@ -176,7 +205,44 @@
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script>
document.getElementById('mobile-nav-btn').addEventListener('click', () => alert('Not yet implemented!'));
const mobileNav = document.getElementById('mobile-nav');
function toggleMobileNav() {
if (mobileNav.classList.contains('show')) {
removeBackdrop()
} else {
const backdrop = document.createElement('div');
backdrop.className = 'mobile-nav-backdrop';
document.body.appendChild(backdrop);
backdrop.addEventListener('click', () => {
mobileNav.classList.remove('show');
removeBackdrop();
});
setTimeout(() => backdrop.classList.add('show'), 10);
}
mobileNav.classList.toggle('show');
}
function removeBackdrop() {
const backdrop = document.querySelector('.mobile-nav-backdrop');
if (backdrop) {
backdrop.classList.remove('show');
setTimeout(() => {
backdrop.remove();
}, 250);
}
}
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
if (mobileNav.classList.contains('show')) {
mobileNav.classList.remove('show');
removeBackdrop();
}
}
});
document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
</script>
</body>
</html>