Add mobile menu

Dor-sketch · Sep 21, 2024 · 888deff · 888deff
1 parent a6bdd7c
commit 888deff
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -111,19 +111,37 @@
 </head>
 
 <body>
+  <body>
     <header>
         <button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
+        <button id="menu-toggle" aria-label="Toggle menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+        <nav id="mobile-menu">
+            <ul>
+                <li><a href="https://dorpascal.com/hebrew-calendar/המרת-תאריך-לועזי-לעברי/">Date Conversion</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/shabbat-times/">Shabbat Times</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/privacy-policy">Privacy Policy</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/chrome-extension">Chrome Extension</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/he/">לעברית</a></li>
+            </ul>
+        </nav>
         <div id="clock"></div>
         <div id="date-display"></div>
         <h1>Hebrew Calendar</h1>
         <div id="parasha-hashavua"></div>
-        <ul>
-            <li><a href="#date-calculation-explanation">Explanation of Calculations</a></li>
-            <li><a href="https://dorpascal.com/hebrew-calendar/המרת-תאריך-לועזי-לעברי/">Date Conversion</a></li>
-            <li><a href="https://dorpascal.com/hebrew-calendar/shabbat-times/">Shabbat Times</a></li>
-            <li><a href="https://dorpascal.com/hebrew-calendar/he/" style="display: block; text-align: center; margin-bottom: 20px;">לגרסה בעברית</a></li>
-            <li><a href="https://dorpascal.com/hebrew-calendar/privacy-policy">Privacy Policy</a></li>
-        </ul>
+        <nav id="menu"></nav>
+            <ul>
+                <li><a href="#date-calculation-explanation">Explanation of Calculations</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/המרת-תאריך-לועזי-לעברי/">Date Conversion</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/shabbat-times/">Shabbat Times</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/privacy-policy">Privacy Policy</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/chrome-extension">Chrome Extension</a></li>
+                <li><a href="https://dorpascal.com/hebrew-calendar/he/">לעברית</a></li>
+            </ul>
+        </nav>
     </header>
     <main>
 
@@ -515,6 +533,25 @@ <h2>Convert Gregorian Date to Hebrew Date</h2>
             setInterval(updateClock, 1000);
             window.addEventListener('resize', renderCalendar);
         };
+
+        // Add this to your existing JavaScript
+
+function toggleMobileMenu() {
+    const mobileMenu = document.getElementById('mobile-menu');
+    mobileMenu.classList.toggle('active');
+}
+
+// Add this to your window.onload function
+document.getElementById('menu-toggle').addEventListener('click', toggleMobileMenu);
+
+// Close menu when clicking outside
+document.addEventListener('click', function(event) {
+    const mobileMenu = document.getElementById('mobile-menu');
+    const menuToggle = document.getElementById('menu-toggle');
+    if (!mobileMenu.contains(event.target) && event.target !== menuToggle) {
+        mobileMenu.classList.remove('active');
+    }
+});
     </script>
 </body>
 

diff --git a/styles.css b/styles.css
@@ -350,4 +350,88 @@ header ul li a::before {
     border-radius: 5px;
     margin-top: 20px;
     text-decoration: none;
+}
+
+/* Existing styles */
+
+/* Mobile menu styles */
+#menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+}
+
+#menu-toggle span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background-color: #333;
+    margin: 5px 0;
+    transition: 0.4s;
+}
+
+#mobile-menu {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: -250px;
+    width: 250px;
+    height: 100%;
+    background-color: #f0f0f0;
+    transition: 0.3s;
+    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
+}
+
+#mobile-menu.active {
+    right: 0;
+}
+
+#mobile-menu ul {
+    list-style-type: none;
+    padding: 20px;
+}
+
+#mobile-menu ul li {
+    margin-bottom: 15px;
+}
+
+#mobile-menu ul li a {
+    text-decoration: none;
+    color: #333;
+    font-size: 18px;
+}
+
+/* Media query for mobile devices */
+@media screen and (max-width: 768px) {
+    header > ul {
+        display: none;
+    }
+
+    #menu-toggle {
+        display: block;
+    }
+
+    #mobile-menu {
+        display: block;
+    }
+
+    #mobile-menu > ul {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+/* Dark theme adjustments */
+.dark-theme #menu-toggle span {
+    background-color: #fff;
+}
+
+.dark-theme #mobile-menu {
+    background-color: #333;
+}
+
+.dark-theme #mobile-menu ul li a {
+    color: #fff;
 }