feat: CSidebar: close mobile/overlaid sidebar on 'esc' #141

Author: woothu

src/template/CSidebar.js

@@ -67,13 +67,18 @@ const CSidebar = props => {
     }
   }
 
+  const onKeydown = e => {
+    e.key.includes('Esc') && isAutoclosable() && closeSidebar()
+  }
+
   const createBackdrop = () => {
     const backdrop = document.createElement('div')
     if (overlaid) {
       document.addEventListener('click', sidebarCloseListener)
     } else {
       backdrop.addEventListener('click', closeSidebar)
     }
+    document.addEventListener('keydown', onKeydown)
     backdrop.className = 'c-sidebar-backdrop c-show'
     backdrop.id = key + 'backdrop'
     document.body.appendChild(backdrop)
@@ -84,6 +89,7 @@ const CSidebar = props => {
     if (backdrop) {
       document.removeEventListener('click', sidebarCloseListener)
       backdrop.removeEventListener('click', closeSidebar)
+      document.removeEventListener('keydown', onKeydown)
       document.body.removeChild(backdrop)
     }
   }
@@ -97,13 +103,15 @@ const CSidebar = props => {
     return Boolean(getComputedStyle(node.current).getPropertyValue('--is-mobile'))
   }
 
+  const isAutoclosable = () => isOnMobile() || overlaid
+
   const onSidebarClick = e => {
     const sidebarItemClicked = String(e.target.className).includes('c-sidebar-nav-link')
     if (
-      sidebarItemClicked &&
-      hideOnMobileClick &&
-      (isOnMobile() || overlaid)
-    ) {
+        sidebarItemClicked && 
+        hideOnMobileClick &&
+        isAutoclosable()
+      ) {
       closeSidebar()
     }
   }