mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make menu button work

Browse Source
This commit is contained in:
PrototypeArea
2022-06-27 03:02:17 -04:00
parent 7bd99ae8ad
commit b4cca108fc
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/astro/headers/BasicHeader.astro
View File

@ -19,13 +19,14 @@
<IconSun /> <IconSun />
</button> </button>
<button <button
class="ml-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"> class="ml-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
onclick="toggleMenu()">
<IconMenu /> <IconMenu />
</button> </button>
</div> </div>
</div> </div>
<div class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200"> <div class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200" id="menu">
<ul class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed"> <ul class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed">
<li> <li>
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out" <a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"

5
src/layouts/Layout.astro
View File

@ -69,4 +69,9 @@
} else { } else {
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark')
} }
function toggleMenu() {
document.getElementById("menu").classList.toggle("hidden");
}
window.toggleMenu = toggleMenu
</script> </script>