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

Problem mit der Menu Button gelöst

Browse Source
This commit is contained in:
Kelvi Yawo Jules Agbessi Awuklu
2024-11-17 17:37:17 +01:00
parent db6919dddf
commit 5d5f9b8ff0
1 changed files with 162 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
webseite/subject.php
View File

@@ -109,16 +109,16 @@ $topics = $subjectData->topics;
.search-container {
position: fixed;
top: 0;
left: 280px;
right: 0;
padding: 1rem 2rem;
padding: 1rem;
background: var(--card-bg);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: left 0.3s ease;
z-index: 40;
display: flex;
align-items: center;
gap: 1rem;
transition: all 0.3s ease;
width: auto;
}
.search-box {
@@ -297,7 +297,31 @@ $topics = $subjectData->topics;
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1025px) {
.menu-toggle {
display: none;
}
.sidebar {
transform: translateX(0);
}
.search-container {
left: 280px; /* Sidebar width */
width: calc(100% - 280px);
}
.main-content {
margin-left: 280px;
width: calc(100% - 280px);
}
}
@media (max-width: 1024px) {
.menu-toggle {
display: flex !important;
}
.sidebar {
transform: translateX(-100%);
}
@@ -306,53 +330,30 @@ $topics = $subjectData->topics;
transform: translateX(0);
}
.search-container {
left: 0;
width: 100%;
padding-left: 4.5rem;
}
.main-content {
margin-left: 0;
width: 100%;
}
.search-container {
left: 0;
padding: 0.85rem; /* Match with menu-toggle top */
padding-left: 4.5rem; /* Increased space for menu icon */
}
.menu-toggle {
display: none;
}
.search-box {
width: calc(100% - 1rem); /* Adjust width to account for padding */
}
.container {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* Slightly smaller for tablets */
gap: 1.5rem;
padding: 1.5rem;
width: calc(100% - 2rem);
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* Single column on mobile */
gap: 1.5rem;
padding: 1rem;
}
.topic-card {
margin: 0 1rem; /* Add horizontal margins */
}
.main-content {
padding-top: 4rem;
}
.search-container {
padding: 0.75rem 1rem;
padding: 1rem;
padding-left: 4.5rem;
}
.menu-toggle {
display: flex;
.search-box {
width: 100%;
}
}
@@ -386,10 +387,10 @@ $topics = $subjectData->topics;
.menu-toggle {
position: fixed;
top: 0.85rem; /* Adjusted to align with search bar */
top: 1rem;
left: 1rem;
z-index: 60;
background: white;
background: var(--card-bg);
border: none;
padding: 0.75rem;
border-radius: 10px;
@@ -397,9 +398,11 @@ $topics = $subjectData->topics;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
width: 42px;
height: 42px;
display: none; /* Hidden by default */
align-items: center;
justify-content: center;
/* Remove display: none from here since we'll control it with JS */
color: var(--text-primary);
transition: all 0.3s ease;
}
/* Add floating animation for icons */
@@ -660,9 +663,86 @@ $topics = $subjectData->topics;
</div>
<script>
function toggleSidebar() {
document.querySelector('.sidebar').classList.toggle('active');
}
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
const searchContainer = document.querySelector('.search-container');
const mainContent = document.querySelector('.main-content');
// 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);
});
// Handle escape key to close sidebar
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('active')) {
sidebar.classList.remove('active');
removeOverlay();
}
});
});
// Add this right after your existing toggleSidebar function
function updateMenuVisibility() {
@@ -848,6 +928,45 @@ $topics = $subjectData->topics;
}
});
}
// Update the menu visibility JavaScript
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// Force correct initial state based on viewport
function updateMenuState() {
if (window.innerWidth <= 1024) {
menuToggle.style.display = 'flex';
sidebar.style.transform = 'translateX(-100%)';
} else {
menuToggle.style.display = 'none';
sidebar.style.transform = 'translateX(0)';
}
}
// Initial state
updateMenuState();
// Update on resize with debounce
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(updateMenuState, 250);
});
// Toggle sidebar
menuToggle.addEventListener('click', () => {
const isHidden = sidebar.style.transform === 'translateX(-100%)';
sidebar.style.transform = isHidden ? 'translateX(0)' : 'translateX(-100%)';
if (isHidden) {
addOverlay();
} else {
removeOverlay();
}
});
});
</script>
<!-- Code injected by live-server -->