From c7c8ce9d488cf21855cf5cd179f95fd397cded40 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Sat, 10 Sep 2022 19:48:27 +0200
Subject: [PATCH] Darkmode anche in mobile

---
 src/components/HamburgerMenu.jsx | 20 ++++++++++++++------
 src/components/Toolbar.jsx       | 32 ++++++++++++++++++++++----------
 src/main.jsx                     |  8 +++++---
 src/styles/main.scss             |  6 ++++++
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/components/HamburgerMenu.jsx b/src/components/HamburgerMenu.jsx
index 09bf29c..146cfed 100644
--- a/src/components/HamburgerMenu.jsx
+++ b/src/components/HamburgerMenu.jsx
@@ -2,13 +2,21 @@ import { ComboBox } from './ComboBox.jsx'
 import { Help } from './Help.jsx'
 import { Icon } from './Icon.jsx'
 
-export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) => {
+export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => {
     return (
         <div class="menu">
             <div class="header">
-                <button class="flat icon" onClick={onClose}>
-                    <Icon name="close" />
-                </button>
+                <div class="option-group">
+                    <button class="flat icon" onClick={onClose}>
+                        <Icon name="close" />
+                    </button>
+                    <button
+                        class="icon"
+                        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                    >
+                        <Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
+                    </button>
+                </div>
                 <div class="item logo">
                     <img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
                 </div>
@@ -34,8 +42,8 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) =>
                         { value: 'course', label: 'Corsi' },
                         { value: 'work-week-v', label: 'Settimana' },
                         // {
-                            // value: 'work-week-h',
-                            // label: 'Settimana (Trasposto)',
+                        // value: 'work-week-h',
+                        // label: 'Settimana (Trasposto)',
                         // },
                     ]}
                 />
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index f61792f..f8a96a9 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -1,7 +1,16 @@
 import { CompoundButton } from './CompoundButton.jsx'
 import { Icon } from './Icon.jsx'
 
-export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp, theme, setTheme }) => {
+export const Toolbar = ({
+    mode,
+    setMode,
+    source,
+    setSource,
+    onShowMenu,
+    onHelp,
+    theme,
+    setTheme,
+}) => {
     return (
         <div class="toolbar">
             <div class="mobile">
@@ -34,13 +43,13 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp,
                             { value: 'course', label: 'Corsi' },
                             { value: 'work-week-v', label: 'Settimana' },
                             // {
-                                // value: 'work-week-h',
-                                // label: (
-                                    // <>
-                                        // <Icon name="warning" />
-                                        // Settimana<sup>T</sup>
-                                    // </>
-                                // ),
+                            // value: 'work-week-h',
+                            // label: (
+                            // <>
+                            // <Icon name="warning" />
+                            // Settimana<sup>T</sup>
+                            // </>
+                            // ),
                             // },
                         ]}
                         value={mode}
@@ -53,8 +62,11 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp,
                     </button>
                 </div>
                 <div class="item option">
-                    <button class="icon" onClick={() => setTheme(theme==="dark"?"light":"dark")}>
-                        <Icon name={theme==="dark"?"dark_mode":"light_mode"} />
+                    <button
+                        class="icon"
+                        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                    >
+                        <Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
                     </button>
                 </div>
                 <div class="item option">
diff --git a/src/main.jsx b/src/main.jsx
index 8c45a03..8fbc82e 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -103,10 +103,10 @@ const App = ({}) => {
         setEventi(eventi)
     }, [source])
 
-    const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "light")
+    const [theme, setTheme] = useState(localStorage.getItem('theme') ?? 'light')
 
-    document.body.classList.toggle("dark-mode", theme === "dark")
-    localStorage.setItem("theme", theme)
+    document.body.classList.toggle('dark-mode', theme === 'dark')
+    localStorage.setItem('theme', theme)
 
     return (
         <>
@@ -158,6 +158,8 @@ const App = ({}) => {
                         setMode,
                         source,
                         setSource,
+                        theme,
+                        setTheme,
                         onClose: () => {
                             setShowMobileMenu(false)
                         },
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f812cbf..093ef9b 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -850,6 +850,7 @@ body {
         justify-content: space-between;
 
         border-bottom: 1px solid var(--border-500);
+
         .logo {
             display: flex;
             align-items: center;
@@ -860,6 +861,11 @@ body {
 
             gap: 0.25rem;
         }
+
+        .option-group {
+            display: flex;
+            gap: 0.5rem;
+        }
     }
 
     .options {