Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update menu element with svg and refactor toggle logic

Browse Source 
Replace div element in menu button with svg. Refactor toggle-menu JS logic to be more concise.
This commit is contained in:
satnaing
2023-04-18 23:19:38 +06:30
parent e654c0308c
commit 0f764242fe
1 changed files with 37 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+37 -47
View File
@@ -38,11 +38,24 @@ const { activeNav } = Astro.props;
aria-expanded="false" aria-expanded="false"
aria-controls="menu-items" aria-controls="menu-items"
> >
<div class="icon-container flex"> <svg
<div id="first-line"></div> xmlns="http://www.w3.org/2000/svg"
<div id="second-line"></div> width="24"
<div id="third-line"></div> height="24"
</div> viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="menu-icon"
>
<line x1="7" y1="12" x2="21" y2="12" class="line"></line>
<line x1="3" y1="6" x2="21" y2="6" class="line"></line>
<line x1="12" y1="18" x2="21" y2="18" class="line"></line>
<line x1="18" y1="6" x2="6" y2="18" class="close"></line>
<line x1="6" y1="6" x2="18" y2="18" class="close"></line>
</svg>
</button> </button>
<ul id="menu-items" class="display-none sm:flex"> <ul id="menu-items" class="display-none sm:flex">
<li> <li>
@@ -164,57 +177,34 @@ const { activeNav } = Astro.props;
@apply scale-125 hover:rotate-12 sm:scale-100; @apply scale-125 hover:rotate-12 sm:scale-100;
} }
.icon-container { .menu-icon line {
@apply h-5 w-6 flex-col items-end justify-between; @apply transition-opacity duration-75 ease-in-out;
} }
.icon-container div { .menu-icon .close {
@apply h-0.5 bg-skin-inverted transition-all; opacity: 0;
} }
#first-line { .menu-icon.is-active .line {
@apply w-full; @apply opacity-0;
} }
#second-line { .menu-icon.is-active .close {
@apply w-3/4; @apply opacity-100;
}
#third-line {
@apply w-1/2;
} }
</style> </style>
<script> <script>
// Toggle menu // Toggle menu
const menuBtn = document.querySelector(".hamburger-menu"); const menuBtn = document.querySelector(".hamburger-menu");
const menuItems = document.querySelector("#menu-items")?.classList; const menuIcon = document.querySelector(".menu-icon");
const menuItems = document.querySelector("#menu-items");
const iconContainer = document.querySelector(".icon-container")?.classList; menuBtn?.addEventListener("click", () => {
const firstLine = document.querySelector("#first-line")?.classList; const menuExpanded = menuBtn.getAttribute("aria-expanded") === "true";
const secondLine = document.querySelector("#second-line ")?.classList; menuIcon?.classList.toggle("is-active");
const thirdLine = document.querySelector("#third-line")?.classList; menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true");
menuBtn.setAttribute(
menuBtn?.addEventListener("click", function () { "aria-label",
const menuExpanded = menuBtn?.getAttribute("aria-expanded"); menuExpanded ? "Open Menu" : "Close Menu"
if (menuExpanded === "false") { );
menuBtn?.setAttribute("aria-expanded", "true"); menuItems?.classList.toggle("display-none");
menuBtn?.setAttribute("aria-label", "Close Menu");
menuItems?.remove("display-none");
// icon animation
iconContainer?.remove("flex");
iconContainer?.add("relative");
firstLine?.add("rotate-45", "absolute", "bottom-1/2");
thirdLine?.add("display-none");
secondLine?.add("!w-full", "-rotate-45", "absolute", "bottom-1/2");
} else {
menuBtn?.setAttribute("aria-expanded", "false");
menuBtn?.setAttribute("aria-label", "Open Menu");
menuItems?.add("display-none");
// icon animation
iconContainer?.add("flex");
iconContainer?.remove("relative");
firstLine?.remove("rotate-45", "absolute", "bottom-1/2");
thirdLine?.remove("display-none");
secondLine?.remove("!w-full", "-rotate-45", "absolute", "bottom-1/2");
}
}); });
</script> </script>