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

feat: update mobile nav to be accessible

Browse Source 
Put 'Open Menu' button under nav tag. Add aria-label, aria-expanded and aria-controls in 'Open Menu'
button. Make the entire nav to be more accessible.
This commit is contained in:
satnaing
2022-12-06 22:48:15 +06:30
parent 93e67bf2be
commit 46ea4aa49a
1 changed files with 96 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+55 -34
View File
@@ -31,31 +31,36 @@ const { activeNav } = Astro.props;
)
}
</a>
<button class="hamburger-menu" aria-label="menu">
<nav id="nav-menu">
<button
class="hamburger-menu focus-outline"
aria-label="Open Menu"
aria-expanded="false"
aria-controls="menu-items"
>
<div class="icon-container flex">
<div id="first-line"></div>
<div id="second-line"></div>
<div id="third-line"></div>
</div>
</button>
</div>
<nav class="display-none sm:flex">
<ul>
<ul id="menu-items" class="display-none sm:flex">
<li>
<a href="/posts" class={activeNav === "posts" ? "active" : ""}
>Posts</a
>
<a href="/posts" class={activeNav === "posts" ? "active" : ""}>
Posts
</a>
</li>
<li>
<a href="/tags" class={activeNav === "tags" ? "active" : ""}>Tags</a>
<a href="/tags" class={activeNav === "tags" ? "active" : ""}>
Tags
</a>
</li>
<li>
<a href="/about" class={activeNav === "about" ? "active" : ""}
>About</a
>
<a href="/about" class={activeNav === "about" ? "active" : ""}>
About
</a>
</li>
</ul>
<div class="button-wrapper">
<li>
<LinkButton
href="/search"
className={`focus-outline p-3 sm:p-1 ${
@@ -64,13 +69,16 @@ const { activeNav } = Astro.props;
ariaLabel="search"
title="Search"
>
<svg xmlns="http://www.w3.org/2000/svg" class="scale-125 sm:scale-100"
<svg
xmlns="http://www.w3.org/2000/svg"
class="scale-125 sm:scale-100"
><path
d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
></path>
</svg>
</LinkButton>
</li>
<li>
{
SITE.lightAndDarkMode && (
<button
@@ -89,9 +97,11 @@ const { activeNav } = Astro.props;
</button>
)
}
</div>
</li>
</ul>
</nav>
</div>
</div>
<Hr />
</header>
@@ -103,38 +113,44 @@ const { activeNav } = Astro.props;
@apply max-w-3xl mx-auto flex flex-col sm:flex-row justify-between items-center;
}
.top-nav-wrap {
@apply w-full p-4 sm:py-8 flex justify-between items-center;
@apply relative w-full p-4 sm:py-8 flex justify-between items-start sm:items-center;
}
.logo {
@apply font-semibold text-xl sm:text-2xl py-1;
@apply absolute sm:static font-semibold text-xl sm:text-2xl py-1;
}
.hamburger-menu {
@apply p-2 sm:hidden;
@apply self-end p-2 sm:hidden;
}
.hamburger-menu svg {
@apply fill-skin-base w-6 h-6 scale-125;
}
nav {
@apply w-full py-2 sm:py-0 sm:pr-4 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-4 bg-skin-fill;
@apply w-full sm:py-0 sm:ml-2 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-4 bg-skin-fill;
}
nav ul {
@apply flex flex-col sm:flex-row sm:space-x-4;
@apply mt-4 w-44 grid grid-rows-4 grid-cols-2 gap-y-2 gap-x-2 sm:gap-y-0 sm:mt-0 sm:ml-0 sm:w-auto sm:gap-x-5;
}
nav li {
@apply py-3 sm:py-2 text-center my-1 sm:my-0;
nav ul li {
@apply col-span-2 flex justify-center items-center;
}
nav a {
@apply px-6 py-3 sm:py-2 sm:px-3 font-medium hover:text-skin-accent;
nav ul li a {
@apply px-4 py-3 w-full text-center sm:px-2 sm:py-1 sm:my-0 font-medium hover:text-skin-accent;
}
nav ul li:nth-child(4) a {
@apply w-auto;
}
nav ul li:nth-child(4),
nav ul li:nth-child(5) {
@apply col-span-1;
}
nav a.active {
@apply underline underline-offset-4 decoration-wavy decoration-2;
}
.button-wrapper {
@apply flex my-2 sm:my-0 space-x-4;
}
.button-wrapper a.active svg {
nav a.active svg {
@apply fill-skin-accent;
}
nav button {
@apply p-1;
}
@@ -168,16 +184,19 @@ const { activeNav } = Astro.props;
<script>
// Toggle menu
const menuBtn = document.querySelector(".hamburger-menu");
const navClassList = document.querySelector("nav")?.classList;
const menuItems = document.querySelector("#menu-items")?.classList;
const iconContainer = document.querySelector(".icon-container")?.classList;
const firstLine = document.querySelector("#first-line")?.classList;
const secondLine = document.querySelector("#second-line ")?.classList;
const thirdLine = document.querySelector("#third-line")?.classList;
menuBtn!.addEventListener("click", function () {
if (navClassList?.contains("display-none")) {
navClassList?.remove("display-none");
menuBtn!.addEventListener("click", function (event) {
const menuExpanded = menuBtn?.getAttribute("aria-expanded");
if (menuExpanded === "false") {
menuBtn?.setAttribute("aria-expanded", "true");
menuBtn?.setAttribute("aria-label", "Close Menu");
menuItems?.remove("display-none");
// icon animation
iconContainer?.remove("flex");
@@ -186,7 +205,9 @@ const { activeNav } = Astro.props;
thirdLine?.add("display-none");
secondLine?.add("!w-full", "-rotate-45", "absolute", "bottom-1/2");
} else {
navClassList?.add("display-none");
menuBtn?.setAttribute("aria-expanded", "false");
menuBtn?.setAttribute("aria-label", "Open Menu");
menuItems?.add("display-none");
// icon animation
iconContainer?.add("flex");