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

Merge pull request #249 from prototypa/astro-v3

Browse Source 
Update ToggleMenu icon and animation on open
This commit is contained in:
André B
2023-09-02 18:54:40 -04:00
committed by GitHub
parent e98ec45752 45953647bb
commit 64f10c9724
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"); 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.body.classList.toggle("overflow-hidden");
document.getElementById("header")?.classList.toggle("h-screen"); document.getElementById("header")?.classList.toggle("h-screen");
document.getElementById("header")?.classList.toggle("expanded"); 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 { export interface Props {
label?: string; label?: string;
class?: string; class?: string;
iconClass?: string;
iconName?: string;
} }
const { const {
label = 'Toggle Menu', label = 'Toggle Menu',
class: 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', className = "flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group",
iconClass = 'w-6 h-6',
iconName = 'tabler:menu',
} = Astro.props; } = Astro.props;
--- ---
<button type="button" class={className} aria-label={label} data-aw-toggle-menu> <button
<Icon name={iconName} class={iconClass} /> 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> </button>