rushilwiz/potentia-website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/potentia-website.git synced 2025-04-09 14:50:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

updataed navbar

Browse Source
This commit is contained in:
SanjayramVempati 2023-03-15 16:24:45 -04:00
parent 6ab9f17f13
commit 781801156b
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Nav.astro
View File

@ -14,35 +14,38 @@ import NavLink from "./NavLink.astro";
</a>
<!-- Desktop Pages -->
<div class="flex flex-row space-x-5 invisible sm:visible my-auto ">
<div class="flex flex-row justify-start visible max-sm:hidden my-auto mr-20 space-x-24 max-lg:space-x-10 max-md:space-x-4 ">
<NavLink href="#" text="Home" />
<NavLink href="#" text="Home" />
<NavLink href="#" text="Home" />
<NavLink href="#" text="Page 1" class="nav" />
<NavLink href="#" text="Page 2" class="nav" />
<NavLink href="#" text="Home" class="nav"/>
<NavLink href="#" text="Home" class="nav"/>
<NavLink href="#" text="Home" class="nav"/>
</div>
<button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10">
<!-- Hamburger button -->
<button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10 visible sm:hidden">
<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 class="max-sm:hidden"></div>
</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>
<a href="/" class=" hover:bg-slate-700 rounded">Page 1</a>
<a href="/" class=" hover:bg-slate-700 rounded">Page 2</a>
<a href="/" class=" hover:bg-slate-700 rounded">Page 2</a>
</div>
</div>
@ -51,6 +54,7 @@ import NavLink from "./NavLink.astro";
<script>
document.addEventListener('DOMContentLoaded', () => {
// Hamburger menu
const hamburger = document.querySelector('#burg');
const links = document.querySelector('#links');
const navLinks = document.querySelectorAll('#links a');
@ -80,5 +84,10 @@ import NavLink from "./NavLink.astro";
});
});
});
// Remove the navlinks when the screen gets too small
</script>