stephan/juchatz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile adjustments

Browse Source
This commit is contained in:
Stephan
2025-05-20 18:41:09 -07:00
parent 08c2009ba2
commit 24d8d51aa9
2 changed files with 83 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Header.astro
View File

@@ -4,43 +4,17 @@
<header>
<nav>
<div class="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
<ul class="main-menu">
<li><a href="/">Home</a></li>
<li class="has-dropdown">
<a href="/services">Services</a>
<ul class="dropdown">
<li class="has-submenu">
<a href="/services#privacy">Privacy</a>
<ul class="submenu">
<li><a href="/services/adblocker">Adblocker</a></li>
<li><a href="/services/bitwarden">Bitwarden</a></li>
<li><a href="/services/remove-telemetry">Remove Windows Telemetry</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="/services#security">Security</a>
<ul class="submenu">
<li><a href="/services/opnsense">OPNsense</a></li>
<li><a href="/services/wireguard">Wireguard</a></li>
<li><a href="/services/vpn">VPN</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="/services#anonymity">Anonymity</a>
<ul class="submenu">
<li><a href="/services/tor">TOR</a></li>
<li><a href="/services/linux-setup">Set Up Linux</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="/services#infrastructure">Infrastructure</a>
<ul class="submenu">
<li><a href="/services/openwrt">OpenWRT</a></li>
<li><a href="/services/nas">NAS</a></li>
<li><a href="/services/proxmox">Proxmox</a></li>
<li><a href="/services/vps">VPS</a></li>
</ul>
</li>
<!-- existing dropdown items -->
</ul>
</li>
<li><a href="/about">About</a></li>
@@ -48,3 +22,15 @@
</ul>
</nav>
</header>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mainMenu = document.querySelector('.main-menu');
menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
mainMenu.classList.toggle('active');
});
});
</script>

71
src/styles/styles.css
View File

@@ -370,19 +370,78 @@ main {
border-left: 4px solid var(--gruvbox-red);
}
/* Responsive design */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
z-index: 200;
}
.mobile-menu-toggle span {
display: block;
width: 100%;
height: 3px;
background-color: var(--gruvbox-fg);
border-radius: 2px;
transition: all 0.3s ease;
}
@media (max-width: 1100px) {
/* Container layout for mobile */
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar";
"main";
}
/* Hide sidebar on mobile */
.sidebar {
border-right: none;
border-top: 1px solid var(--gruvbox-bg-alt);
display: none;
}
/* Hamburger menu styles */
.mobile-menu-toggle {
display: flex;
}
header nav {
position: relative;
}
.main-menu {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background-color: var(--gruvbox-bg-alt);
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 100;
}
.main-menu.active {
display: flex;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* Mobile menu adjustments */