mirror of
https://github.com/PotentiaRobotics/potentia-website.git
synced 2025-04-18 10:50:17 -04:00
129 lines
3.7 KiB
Plaintext
129 lines
3.7 KiB
Plaintext
---
|
|
// Image imports
|
|
import logo from "../images/logo.png";
|
|
// Components---
|
|
import OutlineButton from "../components/buttons/OutlineButton.astro";
|
|
---
|
|
|
|
<header class="h-auto bg-slate-800 " id="nav">
|
|
<div class="flex flex-row justify-between mx-12 ">
|
|
|
|
<!-- Logo -->
|
|
<div>
|
|
<a href="/">
|
|
<img src={logo} alt="Logo" class="mt-4 mb-2 h-14 " />
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Desktop Pages -->
|
|
<div class="flex flex-row max-md:hidden my-auto mr-4 mt-8 text-sm space-x-6 ">
|
|
|
|
<div class="text-xl font-mono space-x-24 max-lg:space-x-12 text-slate-300 duration-500 max-md:space-x-4 object-cover">
|
|
|
|
<a href="/team" class="hover:text-gray-400"><slot name="team">TEAM</slot></a>
|
|
<a href="/olympian" class="hover:text-gray-400 font-bold"><slot name="olympian">O L Y M P I A N</slot></a>
|
|
<a href="/contact" class="hover:text-gray-400"><slot name="contact">CONTACT</slot></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div class="link mt-6">
|
|
|
|
<OutlineButton text="Donate" link="/" />
|
|
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hamburger button -->
|
|
<button type="button" id='burg' class="mt-5 block text-gray-500 hover:text-white focus:text-white focus:outline-none visible md:hidden">
|
|
<svg class="h-8 w-8 fill-current" viewBox="0 0 24 24 ">
|
|
<path id="ham" class="visible" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
|
|
<path id="x" class="hidden" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
|
|
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile pages -->
|
|
<div id="links" class="hidden ml-8 flex flex-col text-white font-semibold px-2 pt-1 pb-4 text-lg space-y-1">
|
|
<a href="/" class=" hover:bg-slate-700 rounded">Team</a>
|
|
<a href="/" class=" hover:bg-slate-700 rounded">Olympian </a>
|
|
<a href="/" class=" hover:bg-slate-700 rounded">Contact</a>
|
|
<a href="/" class="">
|
|
<button class="outline outline-purple-400 px-2 rounded-md
|
|
shadow-lg text-white font-mono font-bold text-xl hover:bg-slate-100 hover:text-purple-400 hover:shadow-purple-600 transition-all duration-300">Donate</button></a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</header>
|
|
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Hamburger menu
|
|
const hamburger = document.querySelector('#burg');
|
|
const links = document.querySelector('#links');
|
|
const navLinks = document.querySelectorAll('#links a');
|
|
const ham = document.querySelector('#ham');
|
|
const x = document.querySelector('#x');
|
|
|
|
|
|
// Make hamburger into a x when clicked
|
|
hamburger.addEventListener('click', () => {
|
|
ham.classList.toggle('hidden');
|
|
});
|
|
|
|
hamburger.addEventListener('click', () => {
|
|
x.classList.toggle('hidden');
|
|
});
|
|
|
|
hamburger.addEventListener('click', () => {
|
|
links.classList.toggle('hidden');
|
|
|
|
|
|
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
links.classList.toggle('hidden');
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
// Remove mobile menu once screen size goes back to desktop
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth > 640) {
|
|
links.classList.add('hidden');
|
|
}
|
|
});
|
|
// Also change the icon back
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth > 640) {
|
|
ham.classList.remove('hidden');
|
|
}
|
|
});
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth > 640) {
|
|
x.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|