Merge pull request #55 from shawninder/typescript-fixes

Remove Typescript errors from Navigation.astro
markteekman · Mar 19, 2023 · 29c1354 · 29c1354
2 parents 77a1ed2 + 5db5e25
commit 29c1354
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -38,7 +38,7 @@ import { DarkMode } from 'accessible-astro-components'
     const currenPathname = window.location.pathname
 
     mobileDesktopMenus.forEach((menu) => {
-      const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')]
+      const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')] as HTMLAnchorElement[]
 
       menuItems.forEach((menuItem) => {
         if (currenPathname.includes(menuItem.pathname.replaceAll('/', '')) && menuItem.textContent !== 'Home') {
@@ -56,7 +56,7 @@ import { DarkMode } from 'accessible-astro-components'
     const mainNavWidth = mainNav.getBoundingClientRect().width
     const desktopMenuWidth = document.querySelector('.desktop-menu').getBoundingClientRect().width
     const logoWidthBuffer = 300
-    const totalMenuWidth = parseInt(desktopMenuWidth) + logoWidthBuffer
+    const totalMenuWidth = Math.round(desktopMenuWidth) + logoWidthBuffer
 
     if (totalMenuWidth >= mainNavWidth) {
       mainNav.classList.remove('is-desktop')
@@ -106,10 +106,11 @@ import { DarkMode } from 'accessible-astro-components'
   // execution
   mainMenu &&
     mainMenu.addEventListener('keydown', (event) => {
-      const currentMenuItem = event.target.closest('li')
+      const element = event.target as Element
+      const currentMenuItem = element.closest('li')
       const menuItems = [...mainMenu.querySelectorAll('.menu-item')]
-      const currentDropdownMenu = event.target.closest('.has-dropdown button')
-      const currentDropdownMenuItem = event.target.closest('.has-dropdown li')
+      const currentDropdownMenu = element.closest('.has-dropdown button')
+      const currentDropdownMenuItem = element.closest('.has-dropdown li')
       const currentIndex = menuItems.findIndex((item) => item === currentMenuItem)
 
       const key = event.key
@@ -157,7 +158,7 @@ import { DarkMode } from 'accessible-astro-components'
         if (key === 'ArrowDown') {
           event.preventDefault()
 
-          if (dropdownMenuItems.indexOf(currentDropdownMenuItem) === dropdownMenuItems.length - 1) {
+          if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === dropdownMenuItems.length - 1) {
             targetItem = dropdownMenuItems[0]
           } else {
             targetItem = dropdownMenuItems[currentIndex + 1]
@@ -167,15 +168,15 @@ import { DarkMode } from 'accessible-astro-components'
         if (key === 'ArrowUp') {
           event.preventDefault()
 
-          if (dropdownMenuItems.indexOf(currentDropdownMenuItem) === 0) {
+          if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === 0) {
             targetItem = dropdownMenuItems[dropdownMenuItems.length - 1]
           } else {
             targetItem = dropdownMenuItems[currentIndex - 1]
           }
         }
 
         if (key === 'Escape') {
-          const currentDropdownMenu = currentDropdownList.previousElementSibling
+          const currentDropdownMenu = (currentDropdownList as Element).previousElementSibling
           targetItem = currentDropdownMenu.parentNode
           closeAllDropdownMenus()
         }
@@ -196,7 +197,8 @@ import { DarkMode } from 'accessible-astro-components'
 
   window.addEventListener('resize', checkMenuSize)
   window.addEventListener('click', (event) => {
-    if (!event.target.hasAttribute('aria-haspopup') && !event.target.classList.contains('submenu-item')) {
+    const element = event.target as Element
+    if (!element.hasAttribute('aria-haspopup') && !element.classList.contains('submenu-item')) {
       closeAllDropdownMenus()
     }
   })