mirror of
https://github.com/PotentiaRobotics/potentia-website.git
synced 2025-04-18 10:50:17 -04:00
85 lines
2.3 KiB
Plaintext
85 lines
2.3 KiB
Plaintext
---
|
|
// Image imports
|
|
import logo from "../images/logo.png";
|
|
// Components
|
|
import NavLink from "./NavLink.astro";
|
|
---
|
|
|
|
<header class="h-auto bg-slate-800 ">
|
|
<div class=" flex flex-row justify-between">
|
|
|
|
<!-- Logo -->
|
|
<a href="/">
|
|
<img src={logo} alt="Logo" class="my-2 mx-6 h-12 " />
|
|
</a>
|
|
|
|
<!-- Desktop Pages -->
|
|
<div class="flex flex-row space-x-5 invisible sm:visible my-auto ">
|
|
|
|
<NavLink href="#" text="Home" />
|
|
<NavLink href="#" text="Home" />
|
|
<NavLink href="#" text="Home" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10">
|
|
<svg class="h-6 w-6 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">Page 1</a>
|
|
<a href="#" class=" hover:bg-slate-700 rounded">Page 2</a>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</header>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
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');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|