fix: menu button style issues (#94)

inclusive-design · Jan 20, 2025 · 3c0eb24 · 3c0eb24
1 parent 893bec5
commit 3c0eb24
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/src/_includes/partials/components/navigation.njk b/src/_includes/partials/components/navigation.njk
@@ -4,7 +4,7 @@
             <a rel="home" href="/{% if lang != 'en' %}{{ lang }}{% endif %}">
                 {% __ "site-title" %}
             </a>
-            <button class="navigation__toggle" id="navigation-toggle" aria-expanded="false">{% __ 'menu' %} {% include 'svg/menu.svg' %}</button>
+            <button class="navigation__toggle" id="navigation-toggle" aria-expanded="false">{% __ 'menu' %} {% include 'svg/menu.svg' %} {% include 'svg/menu-close.svg' %} </button>
         </div>
         <div class="navigation__menu" id="navigation-menu">
             {% set navItems = collections['pages_' + lang] | eleventyNavigation %}

diff --git a/src/_includes/svg/menu-close.svg b/src/_includes/svg/menu-close.svg
diff --git a/src/_includes/svg/menu.svg b/src/_includes/svg/menu.svg
diff --git a/src/assets/styles/components/_navigation.css b/src/assets/styles/components/_navigation.css
@@ -67,6 +67,31 @@ a[rel="home"] {
     font-size: var(--step-0);
 }
 
+/* TODO: work on page wide button styles */
+
+.navigation__toggle:focus,
+.navigation__toggle:focus-visible {
+    border-radius: 0.3125rem;
+    outline-offset: 0.125rem;
+    outline: solid 0.125rem currentColor;
+}
+
+.navigation__toggle:hover {
+    background-color: var(--fl-linkFgColor, var(--color-yellow));
+    border-radius: 0.3125rem;
+    color: var(--fl-bgColor,var(--color-indigo-700));
+}
+
+.navigation__toggle[aria-expanded="false"] > .menu__expanded,
+.navigation__toggle[aria-expanded="true"] > .menu__collapsed {
+    display: none;
+}
+
+.navigation__toggle[aria-expanded="true"] > .menu__expanded,
+.navigation__toggle[aria-expanded="false"] > .menu__collapsed {
+    display: block;
+}
+
 .navigation__menu {
     width: 100%;
     background-color: var(--fl-bgColor, var(--color-indigo-700));