Skip to content

Commit 888deff

Browse files
Dor-sketchDor-sketch
committed
Add mobile menu
1 parent a6bdd7c commit 888deff

File tree

2 files changed

+128
-7
lines changed

2 files changed

+128
-7
lines changed

‎index.html

+44-7
Original file line numberDiff line numberDiff line change
@@ -111,19 +111,37 @@
111111
</head>
112112

113113
<body>
114+
<body>
114115
<header>
115116
<button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
117+
<button id="menu-toggle" aria-label="Toggle menu">
118+
<span></span>
119+
<span></span>
120+
<span></span>
121+
</button>
122+
<nav id="mobile-menu">
123+
<ul>
124+
<li><a href="https://dorpascal.com/hebrew-calendar/המרת-תאריך-לועזי-לעברי/">Date Conversion</a></li>
125+
<li><a href="https://dorpascal.com/hebrew-calendar/shabbat-times/">Shabbat Times</a></li>
126+
<li><a href="https://dorpascal.com/hebrew-calendar/privacy-policy">Privacy Policy</a></li>
127+
<li><a href="https://dorpascal.com/hebrew-calendar/chrome-extension">Chrome Extension</a></li>
128+
<li><a href="https://dorpascal.com/hebrew-calendar/he/">לעברית</a></li>
129+
</ul>
130+
</nav>
116131
<div id="clock"></div>
117132
<div id="date-display"></div>
118133
<h1>Hebrew Calendar</h1>
119134
<div id="parasha-hashavua"></div>
120-
<ul>
121-
<li><a href="#date-calculation-explanation">Explanation of Calculations</a></li>
122-
<li><a href="https://dorpascal.com/hebrew-calendar/המרת-תאריך-לועזי-לעברי/">Date Conversion</a></li>
123-
<li><a href="https://dorpascal.com/hebrew-calendar/shabbat-times/">Shabbat Times</a></li>
124-
<li><a href="https://dorpascal.com/hebrew-calendar/he/" style="display: block; text-align: center; margin-bottom: 20px;">לגרסה בעברית</a></li>
125-
<li><a href="https://dorpascal.com/hebrew-calendar/privacy-policy">Privacy Policy</a></li>
126-
</ul>
135+
<nav id="menu"></nav>
136+
<ul>
137+
<li><a href="#date-calculation-explanation">Explanation of Calculations</a></li>
138+
<li><a href="https://dorpascal.com/hebrew-calendar/המרת-תאריך-לועזי-לעברי/">Date Conversion</a></li>
139+
<li><a href="https://dorpascal.com/hebrew-calendar/shabbat-times/">Shabbat Times</a></li>
140+
<li><a href="https://dorpascal.com/hebrew-calendar/privacy-policy">Privacy Policy</a></li>
141+
<li><a href="https://dorpascal.com/hebrew-calendar/chrome-extension">Chrome Extension</a></li>
142+
<li><a href="https://dorpascal.com/hebrew-calendar/he/">לעברית</a></li>
143+
</ul>
144+
</nav>
127145
</header>
128146
<main>
129147

@@ -515,6 +533,25 @@ <h2>Convert Gregorian Date to Hebrew Date</h2>
515533
setInterval(updateClock, 1000);
516534
window.addEventListener('resize', renderCalendar);
517535
};
536+
537+
// Add this to your existing JavaScript
538+
539+
function toggleMobileMenu() {
540+
const mobileMenu = document.getElementById('mobile-menu');
541+
mobileMenu.classList.toggle('active');
542+
}
543+
544+
// Add this to your window.onload function
545+
document.getElementById('menu-toggle').addEventListener('click', toggleMobileMenu);
546+
547+
// Close menu when clicking outside
548+
document.addEventListener('click', function(event) {
549+
const mobileMenu = document.getElementById('mobile-menu');
550+
const menuToggle = document.getElementById('menu-toggle');
551+
if (!mobileMenu.contains(event.target) && event.target !== menuToggle) {
552+
mobileMenu.classList.remove('active');
553+
}
554+
});
518555
</script>
519556
</body>
520557

‎styles.css

+84
Original file line numberDiff line numberDiff line change
@@ -350,4 +350,88 @@ header ul li a::before {
350350
border-radius: 5px;
351351
margin-top: 20px;
352352
text-decoration: none;
353+
}
354+
355+
/* Existing styles */
356+
357+
/* Mobile menu styles */
358+
#menu-toggle {
359+
display: none;
360+
background: none;
361+
border: none;
362+
cursor: pointer;
363+
padding: 10px;
364+
}
365+
366+
#menu-toggle span {
367+
display: block;
368+
width: 25px;
369+
height: 3px;
370+
background-color: #333;
371+
margin: 5px 0;
372+
transition: 0.4s;
373+
}
374+
375+
#mobile-menu {
376+
display: none;
377+
position: fixed;
378+
top: 0;
379+
right: -250px;
380+
width: 250px;
381+
height: 100%;
382+
background-color: #f0f0f0;
383+
transition: 0.3s;
384+
box-shadow: -2px 0 5px rgba(0,0,0,0.2);
385+
}
386+
387+
#mobile-menu.active {
388+
right: 0;
389+
}
390+
391+
#mobile-menu ul {
392+
list-style-type: none;
393+
padding: 20px;
394+
}
395+
396+
#mobile-menu ul li {
397+
margin-bottom: 15px;
398+
}
399+
400+
#mobile-menu ul li a {
401+
text-decoration: none;
402+
color: #333;
403+
font-size: 18px;
404+
}
405+
406+
/* Media query for mobile devices */
407+
@media screen and (max-width: 768px) {
408+
header > ul {
409+
display: none;
410+
}
411+
412+
#menu-toggle {
413+
display: block;
414+
}
415+
416+
#mobile-menu {
417+
display: block;
418+
}
419+
420+
#mobile-menu > ul {
421+
flex-direction: column;
422+
align-items: flex-start;
423+
}
424+
}
425+
426+
/* Dark theme adjustments */
427+
.dark-theme #menu-toggle span {
428+
background-color: #fff;
429+
}
430+
431+
.dark-theme #mobile-menu {
432+
background-color: #333;
433+
}
434+
435+
.dark-theme #mobile-menu ul li a {
436+
color: #fff;
353437
}

0 commit comments

Comments
 (0)