diff --git a/css/_dropdown.scss b/css/_dropdown.scss index ff9f857..4cc0b79 100644 --- a/css/_dropdown.scss +++ b/css/_dropdown.scss @@ -24,10 +24,15 @@ gap: 0.25rem; font-weight: normal; padding: 0; - @include breakpoints.breakpoint('medium') { - &[aria-expanded="true"] > .username { - text-decoration: underline; - text-decoration-thickness: 0.125rem; + &[aria-expanded="true"] { + & > .material-symbols-rounded { + transform: rotate(180deg); + } + @include breakpoints.breakpoint('medium') { + & > .username { + text-decoration: underline; + text-decoration-thickness: 0.125rem; + } } } } @@ -35,7 +40,7 @@ .dropdown-container { @include breakpoints.breakpoint('medium') { background: white; - border-radius: 0.25rem; + border-radius: 0.25rem; box-shadow: var(--z-space-medium); padding: 1rem 1.5rem; position: absolute; diff --git a/js/index.js b/js/index.js index fa5399c..2cfd329 100644 --- a/js/index.js +++ b/js/index.js @@ -98,13 +98,8 @@ // Toggle `aria-expanded` as true or false getAriaExpanded = !getAriaExpanded; event.target.setAttribute('aria-expanded', getAriaExpanded); - // Toggle display for dropdown and arrow keys - const getArrowKeys = [...dropdown.children].filter((arrowKey) => { - return arrowKey.innerText.startsWith('keyboard_arrow_'); - }); - [getDropdown, ...getArrowKeys].forEach((toggle) => { - toggle.style.display = toggle.style.display === 'block' ? 'none' : 'block'; - }); + // Toggle display for dropdown + getDropdown.style.display = getDropdown.style.display === 'block' ? 'none' : 'block'; }); // Close dropdown if `Escape` has been pressed or clicked outside of dropdown ['click', 'keyup'].forEach((listener) => { diff --git a/views/layout.erb b/views/layout.erb index 1dde1e2..4520fd1 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -22,19 +22,17 @@ - + - + <% title = Navigation::Title.for(request.path_info) - %> -