diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 765d5ae..57bb8df 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -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>