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

Update ToggleMenu icon and animation on open

Browse Source
This commit is contained in:
prototypa
2023-09-02 18:53:41 -04:00
parent 36f400e667
commit 45953647bb
2 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/BasicScripts.astro
View File

@ -45,7 +45,8 @@ import { UI } from '~/utils/config';
document.querySelector("#header > div > div:last-child")?.classList.add("hidden");
});
attachEvent('[data-aw-toggle-menu]', 'click', function () {
attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
elem.classList.toggle("expanded");
document.body.classList.toggle("overflow-hidden");
document.getElementById("header")?.classList.toggle("h-screen");
document.getElementById("header")?.classList.toggle("expanded");

30
src/components/common/ToggleMenu.astro
View File

@ -1,22 +1,34 @@
---
import { Icon } from 'astro-icon/components';
export interface Props {
label?: string;
class?: string;
iconClass?: string;
iconName?: string;
}
const {
label = 'Toggle Menu',
class:
className = 'ml-1.5 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 transition',
iconClass = 'w-6 h-6',
iconName = 'tabler:menu',
className = "flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group",
} = Astro.props;
---
<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
<Icon name={iconName} class={iconClass} />
<button
class={className}
aria-label={label}
data-aw-toggle-menu
>
<span class="sr-only">{label}</span>
<slot>
<span
aria-hidden="true"
class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:rotate-45 group-[.expanded]:translate-y-2.5"
></span>
<span
aria-hidden="true"
class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:opacity-0"
></span>
<span
aria-hidden="true"
class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:-rotate-45 group-[.expanded]:-translate-y-2.5"
></span>
</slot>
</button>