Aggiunti conttatti nell'help + Help anche su mobile

src/components/HamburgerMenu.jsx

@@ -1,4 +1,5 @@
 import { ComboBox } from './ComboBox.jsx'
+import { Help } from './Help.jsx'
 import { Icon } from './Icon.jsx'
 
 export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) => {
@@ -39,6 +40,14 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) =>
                     ]}
                 />
             </div>
+            <hr />
+            <div class="help">
+                <h2>
+                    <Icon name="info" />
+                    Guida
+                </h2>
+                <Help />
+            </div>
         </div>
     )
 }

src/components/Help.jsx

@@ -0,0 +1,39 @@
+import { Icon } from './Icon.jsx'
+
+export const Help = ({}) => (
+    <>
+        <h3>Selezione Corsi</h3>
+        <p>
+            Per visualizzare solo una selezione dei corsi disponibili, clicca su quelli che ti
+            interessano e poi nascondi gli altri con il tasto <Icon name="visibility" /> che
+            comparirà in basso a destra.
+        </p>
+        <p>
+            Per vedere l'orario settimanale, clicca su <b>Settimana</b>, che mostrerà un calendario
+            con i corsi attualmente selezionati.
+        </p>
+        <p>
+            La selezione effettuata verrà preservata dalla visualizzazione <b>Corsi</b> a quella
+            Settimana, permettendo di individuare eventuali sovrapposizioni di orari.
+        </p>
+        <p>
+            I corsi sono raggruppati per: primo, secondo, terzo anno (<b>I</b>,<b>II</b>,<b>III</b>)
+            e magistrale. Alternativamente, puoi scegliere fra tutti i corsi disponibili cliccando
+            su <b>Tutti</b>.
+        </p>
+        <h3>Stampa</h3>
+        <p>
+            Puoi stampare l'orario attualmente visibile con il bottone <Icon name="print" /> (è
+            consigliato controllare le opzioni di stampa per un risultato soddisfacente).
+        </p>
+        <h3>Bug &amp; Contatti</h3>
+        <p>
+            In caso di bug puoi creare una issue sulla repo git del progetto{' '}
+            <a href="https://git.phc.dm.unipi.it/phc/orario">
+                https://git.phc.dm.unipi.it/phc/orario
+            </a>{' '}
+            oppure puoi contattarci direttamente all'indirizzo{' '}
+            <a href="mailto:macchinisti@lists.dm.unipi.it">macchinisti@lists.dm.unipi.it</a>.
+        </p>
+    </>
+)

src/components/Popup.jsx

@@ -1,8 +1,17 @@
+import { useRef } from 'preact/hooks'
 import { Icon } from './Icon.jsx'
 
 export const Popup = ({ title, children, onClose }) => {
+    const popupLeaveRegionRef = useRef()
+
     return (
-        <div class="popup-container">
+        <div
+            class="popup-container"
+            ref={popupLeaveRegionRef}
+            onClick={e =>
+                popupLeaveRegionRef.current && popupLeaveRegionRef.current === e.target && onClose()
+            }
+        >
             <div class="popup">
                 <div class="header">
                     <div class="title">{title}</div>