feat: add close button to docs nav (#1033)

Author: julioest

docs/ui/src/css/nav.css

@@ -300,3 +300,25 @@
   font-weight: var(--body-font-weight-bold);
   opacity: 1;
 }
+
+.nav-close {
+  background: transparent url(../img/octicons-16.svg#view-close) no-repeat center / 100% 100%;
+  min-width: 24px;
+  min-height: 24px;
+  outline: none;
+  border: none;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.nav-close span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

docs/ui/src/img/octicons-16.svg

@@ -8,9 +8,11 @@
   if (!navContainer && (!navToggle || (navToggle.hidden = true))) return
   var nav = navContainer.querySelector('.nav')
   var navMenuToggle = navContainer.querySelector('.nav-menu-toggle')
+  var closeNavBtn = navContainer.querySelector('.nav-close')
 
   navToggle.addEventListener('click', showNav)
   navContainer.addEventListener('click', trapEvent)
+  closeNavBtn.addEventListener('click', hideNav)
 
   var menuPanel = navContainer.querySelector('[data-panel=menu]')
   if (!menuPanel) return

docs/ui/src/js/01-nav.js

@@ -1,5 +1,8 @@
 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
+    <button class="nav-close" type="button" aria-label="Close navigation">
+      <span aria-hidden="true">Close</span>
+    </button>
     <div class="panels">
 {{> nav-menu}}
 {{> nav-explore}}