Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Javascript in neue Dateien ausgelagert

Browse Source
This commit is contained in:
Matthias Grief
2024-11-19 13:17:01 +01:00
parent 0b87c1fc7c
commit bd173d296d
4 changed files with 118 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
webseite/topic.php
View File

@@ -31,6 +31,7 @@ if (!isset($topicData)) {
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="assets/js/sidebar.js"></script>
</head>
<body>
<button class="menu-toggle fixed top-4 left-4 z-50 bg-white h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
@@ -106,91 +107,6 @@ if (!isset($topicData)) {
</ul>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// Function to handle sidebar toggle
function toggleSidebar() {
sidebar.classList.toggle('active');
// Add overlay when sidebar is active on mobile/tablet
if (window.innerWidth <= 1024) {
if (sidebar.classList.contains('active')) {
addOverlay();
} else {
removeOverlay();
}
}
}
// Function to add overlay
function addOverlay() {
const overlay = document.createElement('div');
overlay.className = 'sidebar-overlay';
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 45;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Close sidebar when clicking overlay
overlay.addEventListener('click', () => {
sidebar.classList.remove('active');
removeOverlay();
});
// Fade in
requestAnimationFrame(() => {
overlay.style.opacity = '1';
});
}
// Function to remove overlay
function removeOverlay() {
const overlay = document.querySelector('.sidebar-overlay');
if (overlay) {
overlay.style.opacity = '0';
setTimeout(() => overlay.remove(), 300);
}
}
// Add click event to menu toggle
menuToggle.addEventListener('click', toggleSidebar);
// Handle window resize
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 1024) {
sidebar.classList.remove('active');
removeOverlay();
}
}, 250);
});
});
// Add this right after your existing toggleSidebar function
function updateMenuVisibility() {
const menuToggle = document.querySelector('.menu-toggle');
if (window.innerWidth <= 768) { // Smartphone breakpoint
menuToggle.style.display = 'flex';
} else {
menuToggle.style.display = 'none';
}
}
// Add event listeners
window.addEventListener('resize', updateMenuVisibility);
</script>
</body>
</html>