Add close button to sidebar

index.html

@@ -141,6 +141,9 @@
       <details class="main">
         <summary></summary>
         <div class="sidebar">
+          <button type="button" class="close-options-button">
+            <span aria-hidden="true">&#10005;</span>
+          </button>
           <form>
             <div class="preprocess">
               <div class="other-input">

src/css/style.css

@@ -153,6 +153,17 @@ details[open]:not(.main) > summary::after {
   content: '▼';
 }
 
+details.main .close-options-button {
+  display: none;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 2.2rem;
+  height: 2.2rem;
+  margin: 0;
+  font-size: 1rem;
+}
+
 @media (max-width: 414px) {
   summary,
   label,
@@ -175,6 +186,7 @@ details[open]:not(.main) > summary::after {
   }
 
   details[open].main > .sidebar {
+    max-width: calc(100% - var(--space) * 4);
     backdrop-filter: saturate(180%) blur(20px);
     background-color: var(--sidebar-background-color);
   }
@@ -201,6 +213,10 @@ details[open]:not(.main) > summary::after {
     z-index: -1;
     opacity: 0;
   }
+
+  details.main[open] .close-options-button {
+    display: inline-block;
+  }
 }
 
 .input-image {

src/i18n/de-DE.js

@@ -70,6 +70,7 @@ const translations = {
   considerDPR: 'Pixelverhältnis des Geräts beachten',
 
   tweak: 'Anpassen',
+  closeOptions: 'Schließen',
 
   optimizingSVG: 'Optmiere SVG',
   copiedSVG: 'SVG kopiert',

src/i18n/el-GR.js

@@ -70,6 +70,7 @@ const translations = {
   considerDPR: 'Λάβετε υπόψη την αναλογία pixel της συσκευής',
 
   tweak: 'Προσαρμογή',
+  closeOptions: 'Κλείσιμο',
 
   optimizingSVG: 'Βελτιστοποίηση SVG',
   copiedSVG: 'SVG Αντιγράφηκε',

src/i18n/en-US.js

@@ -70,6 +70,7 @@ const translations = {
   considerDPR: 'Consider Device Pixel Ratio',
 
   tweak: 'Tweak',
+  closeOptions: 'Close',
 
   optimizingSVG: 'Optimizing SVG',
   copiedSVG: 'Copied SVG',

src/js/domrefs.js

@@ -49,6 +49,7 @@ const toast = document.querySelector('.toast');
 const dropContainer = document.documentElement;
 const details = document.querySelector('details.main');
 const summary = document.querySelector('summary');
+const closeOptionsButton = document.querySelector('.close-options-button');
 
 const dpr = window.devicePixelRatio;
 
@@ -83,5 +84,6 @@ export {
   progress,
   details,
   summary,
+  closeOptionsButton,
   dpr,
 };

src/js/ui.js

@@ -46,6 +46,7 @@ import {
   progress,
   details,
   summary,
+  closeOptionsButton,
 } from './domrefs.js';
 import {
   resetZoomAndPan,
@@ -299,7 +300,7 @@ const initUI = async () => {
   await i18n.getTranslations();
   changeLanguage();
 
-  const mediaQueryList = window.matchMedia('(max-width: 400px)');
+  const mediaQueryList = window.matchMedia('(max-width: 414px)');
   const onMaxWidthMatch = () => {
     if (mediaQueryList.matches) {
       details.open = false;
@@ -417,6 +418,7 @@ const changeLanguage = () => {
   summary.innerHTML = '';
   summary.append(createIcon(optionsIcon));
   summary.append(document.createTextNode(i18n.t('tweak')));
+  closeOptionsButton.ariaLabel = i18n.t('closeOptions');
 };
 
 resetAllButton.addEventListener('click', async () => {
@@ -479,4 +481,8 @@ window.addEventListener(
   }, 250),
 );
 
+closeOptionsButton.addEventListener('click', () => {
+  details.open = false;
+});
+
 export { initUI, filters, filterInputs, showToast, COLORS, SCALE, POTRACE };