design rework

static/player.js

@@ -971,80 +971,4 @@ function escapeHtml(unsafe) {
         .replace(/>/g, ">")
         .replace(/"/g, """)
         .replace(/'/g, "'");
-}
-
-// Mobile navigation handling
-function initializeMobileNav() {
-    const menuToggle = document.getElementById('menu-toggle');
-    const sidebar = document.querySelector('.sidebar');
-    const overlay = document.getElementById('sidebar-overlay');
-    const mobileNavLinks = document.querySelectorAll('.mobile-nav a');
-
-    menuToggle.addEventListener('click', toggleSidebar);
-    overlay.addEventListener('click', closeSidebar);
-
-    mobileNavLinks.forEach(link => {
-        link.addEventListener('click', (e) => {
-            e.preventDefault();
-            const view = e.currentTarget.dataset.view;
-            switchView(view);
-            closeSidebar();
-        });
-    });
-
-    // Handle swipe gestures
-    let touchStartX = 0;
-    let touchEndX = 0;
-
-    document.addEventListener('touchstart', e => {
-        touchStartX = e.changedTouches[0].screenX;
-    }, false);
-
-    document.addEventListener('touchend', e => {
-        touchEndX = e.changedTouches[0].screenX;
-        handleSwipe();
-    }, false);
-
-    function handleSwipe() {
-        const swipeThreshold = 50;
-        const diff = touchEndX - touchStartX;
-
-        if (Math.abs(diff) < swipeThreshold) return;
-
-        if (diff > 0) { // Swipe right
-            if (touchStartX < 30) { // Only if swipe starts near the left edge
-                openSidebar();
-            }
-        } else { // Swipe left
-            closeSidebar();
-        }
-    }
-}
-
-function toggleSidebar() {
-    const sidebar = document.querySelector('.sidebar');
-    const overlay = document.getElementById('sidebar-overlay');
-    sidebar.classList.toggle('active');
-    overlay.classList.toggle('active');
-}
-
-function openSidebar() {
-    const sidebar = document.querySelector('.sidebar');
-    const overlay = document.getElementById('sidebar-overlay');
-    sidebar.classList.add('active');
-    overlay.classList.add('active');
-}
-
-function closeSidebar() {
-    const sidebar = document.querySelector('.sidebar');
-    const overlay = document.getElementById('sidebar-overlay');
-    sidebar.classList.remove('active');
-    overlay.classList.remove('active');
-}
-
-// Update the initialization code
-document.addEventListener('DOMContentLoaded', function() {
-    initializeAudioPlayer();
-    initializeMobileNav();
-    // ... rest of your initialization code
-});
+}

static/style.css

@@ -1,9 +1,9 @@
 :root {
-    --sidebar-width: 250px;
-    --player-height: 100px;
     --primary-color: #1a73e8;
-    --background-color: #f0f2f5;
-    --card-background: white;
+    --secondary-color: #e8f0fe;
+    --text-color: #333;
+    --bg-color: #f0f2f5;
+    --sidebar-width: 250px;
 }
 
 * {
@@ -14,193 +14,865 @@
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: var(--background-color);
-    color: #333;
-    overflow: hidden;
+    background: var(--bg-color);
+    color: var(--text-color);
 }
 
 .container {
     display: grid;
     grid-template-columns: var(--sidebar-width) 1fr;
-    grid-template-rows: 1fr var(--player-height);
-    height: 100vh;
+    grid-template-rows: 1fr auto;
+    min-height: 100vh;
+    gap: 1rem;
+    padding: 1rem;
     transition: all 0.3s ease;
 }
 
-.mobile-nav {
-    display: none;
+.music-player {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-    background: var(--card-background);
-    padding: 0.5rem;
+    background: white;
+    padding: 1rem;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
+    z-index: 100;
+}
+
+.now-playing {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 1rem;
+    align-items: center;
+}
+
+#album-art {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.player-header h1 {
+    margin-bottom: 2rem;
+    color: #1a73e8;
 }
 
-.mobile-nav ul {
+.track-info {
+    flex: 1;
+    cursor: pointer;
     display: flex;
-    justify-content: space-around;
-    list-style: none;
+    flex-direction: column;
+    gap: 0.25rem;
 }
 
-.mobile-nav a {
+#track-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+#track-artist, #track-album {
     color: #666;
-    text-decoration: none;
+    margin-bottom: 0.5rem;
+}
+
+.player-controls {
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem 0;
+}
+
+.control-buttons {
+    display: flex;
     align-items: center;
-    font-size: 0.8rem;
+    justify-content: center;
+    gap: 1.5rem;
 }
 
-.mobile-nav i {
-    font-size: 1.2rem;
-    margin-bottom: 0.2rem;
+.play-btn {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.play-btn:hover {
+    transform: scale(1.1);
+}
+
+.time-control {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+#seek-slider {
+    flex: 1;
+}
+
+button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5rem;
+    color: #1a73e8;
+    padding: 0.5rem;
+    border-radius: 50%;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #f0f2f5;
+}
+
+.volume-control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: 2rem;
+}
+
+#volume-slider {
+    width: 100px;
 }
 
 .sidebar {
-    background: var(--card-background);
+    background: white;
+    border-radius: 12px;
     padding: 1rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 2rem);
+    position: sticky;
+    top: 1rem;
     overflow-y: auto;
-    transition: transform 0.3s ease;
+}
+
+.nav-menu, .playlist-menu {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
+}
+
+.nav-menu li a, .playlist-menu li a {
+    display: block;
+    padding: 0.75rem 1rem;
+    color: #333;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: background-color 0.3s;
+}
+
+.nav-menu li a:hover, .playlist-menu li a:hover {
+    background-color: #f0f2f5;
+}
+
+.nav-menu li a.active {
+    background-color: #e8f0fe;
+    color: #1a73e8;
+}
+
+.btn-new-playlist {
+    width: 100%;
+    padding: 0.75rem;
+    background: none;
+    border: 1px dashed #1a73e8;
+    color: #1a73e8;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-new-playlist:hover {
+    background: #e8f0fe;
 }
 
 .main-content {
+    background: white;
+    border-radius: 12px;
     padding: 1rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow-y: auto;
-    background: var(--background-color);
 }
 
-.music-player {
-    grid-column: 1 / -1;
-    background: var(--card-background);
-    padding: 1rem;
+.view-header {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.search-box {
+    position: relative;
+}
+
+.search-box input {
+    padding: 0.5rem 2rem 0.5rem 1rem;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    width: 200px;
+}
+
+.search-box i {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+}
+
+.album-grid, .artist-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem;
+}
+
+.album-card, .artist-card {
+    text-align: center;
+    cursor: pointer;
+    transition: transform 0.3s;
+}
+
+.album-card:hover, .artist-card:hover {
+    transform: translateY(-5px);
+}
+
+.album-art, .artist-image {
+    width: 180px;
+    height: 180px;
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
+    object-fit: cover;
+}
+
+.track-list {
+    display: grid;
+    gap: 0.5rem;
+    padding: 1rem;
+}
+
+.music-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    padding: 0.75rem;
+    border-radius: 8px;
+    background: white;
+    transition: transform 0.2s ease;
+}
+
+.music-item:hover {
+    transform: translateX(5px);
+}
+
+.music-item.playing {
+    background-color: #e8f0fe;
+    color: #1a73e8;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 5px;
+    background: #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 15px;
+    height: 15px;
+    background: #1a73e8;
+    border-radius: 50%;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
     align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: white;
+    padding: 2rem;
+    border-radius: 12px;
+    width: 400px;
+}
+
+.modal-content input {
+    width: 100%;
+    padding: 0.75rem;
+    margin: 1rem 0;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+}
+
+.modal-buttons {
+    display: flex;
+    justify-content: flex-end;
     gap: 1rem;
-    height: var(--player-height);
 }
 
-.now-playing {
+.modal-buttons button {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+#save-playlist {
+    background: #1a73e8;
+    color: white;
+    border: none;
+}
+
+#cancel-playlist {
+    background: none;
+    border: 1px solid #ddd;
+}
+
+.track-actions {
     display: flex;
     align-items: center;
-    gap: 1rem;
+}
+
+.track-name {
+    font-weight: 500;
+}
+
+.track-artist {
+    color: #666;
+    font-size: 0.9em;
+}
+
+.playlist-menu-popup {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    min-width: 200px;
+}
+
+.menu-items {
+    padding: 0.5rem;
+}
+
+.menu-item {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.menu-item:hover {
+    background-color: #f0f2f5;
+}
+
+.notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: #1a73e8;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    animation: slide-in 0.3s ease-out;
+    z-index: 1000;
+}
+
+.notification.fade-out {
+    animation: fade-out 0.3s ease-out;
+}
+
+.playlist-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem;
+}
+
+.playlist-card {
+    background: white;
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    transition: transform 0.3s;
+}
+
+.playlist-card:hover {
+    transform: translateY(-5px);
+}
+
+.playlist-art {
+    width: 150px;
+    height: 150px;
+    background: #f0f2f5;
+    border-radius: 8px;
+    margin: 0 auto 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.playlist-art i {
+    font-size: 3rem;
+    color: #1a73e8;
+}
+
+.delete-playlist {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    color: #666;
+    padding: 0.5rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.playlist-card:hover .delete-playlist {
+    opacity: 1;
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+.menu-trigger {
+    padding: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.3s;
+    color: #666;
+}
+
+.music-item:hover .menu-trigger {
+    opacity: 1;
+}
+
+.context-menu {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    min-width: 200px;
+    overflow: hidden;
+}
+
+.menu-items {
+    padding: 0.5rem 0;
+}
+
+.menu-item {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    transition: background-color 0.2s;
+}
+
+.menu-item:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-item i {
+    width: 20px;
+    text-align: center;
+    color: #666;
+}
+
+.menu-separator {
+    height: 1px;
+    background-color: #eee;
+    margin: 0.5rem 0;
+}
+
+.lyrics-container {
     flex: 1;
+    max-width: 400px;
+    margin-left: 2rem;
+    display: flex;
+    flex-direction: column;
+    max-height: 200px;
 }
 
-#album-art {
-    width: 60px;
-    height: 60px;
+.lyrics-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.lyrics-toggle {
+    background: none;
+    border: 1px solid #ddd;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+.lyrics-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-right: 1rem;
+    line-height: 1.6;
+    scroll-behavior: smooth;
+    padding: 1rem;
+}
+
+.lyrics-line {
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    opacity: 0.7;
+}
+
+.lyrics-line:hover {
+    background-color: #f0f2f5;
+    opacity: 1;
+}
+
+.lyrics-line.active {
+    color: #1a73e8;
+    font-weight: bold;
+    opacity: 1;
+    background-color: #e8f0fe;
+}
+
+.playlist-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+}
+
+.playlist-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.playlist-icon {
+    font-size: 2.5rem;
+    color: #1a73e8;
+    background: #e8f0fe;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.play-playlist {
+    background: #1a73e8;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 20px;
+    font-size: 1rem;
+}
+
+.play-playlist:hover {
+    background: #1557b0;
+}
+
+.playlist-count {
+    color: #666;
+    font-size: 0.9em;
+    margin-left: 0.5rem;
+}
+
+#playlist-list a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#playlist-list i {
+    margin-right: 0.5rem;
+}
+
+.album-art-container, .artist-art-container {
+    position: relative;
+    width: 180px;
+    height: 180px;
+    margin-bottom: 0.5rem;
+}
+
+.album-art, .artist-image {
+    width: 100%;
+    height: 100%;
     border-radius: 8px;
     object-fit: cover;
 }
 
-@media (max-width: 768px) {
-    :root {
-        --sidebar-width: 0px;
-        --player-height: 80px;
-    }
+.play-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(26, 115, 232, 0.9);
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+    cursor: pointer;
+    border: none;
+    font-size: 1.2rem;
+}
+
+.album-art-container:hover .play-overlay,
+.artist-art-container:hover .play-overlay {
+    opacity: 1;
+}
+
+.album-info, .artist-info {
+    cursor: pointer;
+}
+
+.album-card, .artist-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.artist-image {
+    background-color: #e8f0fe;
+}
+
+.artist-image[src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNlOWVjZWYiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgc3R5bGU9ImZvbnQtZmFtaWx5OiBBcmlhbDsgZm9udC1zaXplOiAyMHB4OyBmaWxsOiAjNmM3NTdkOyBkb21pbmFudC1iYXNlbGluZTogbWlkZGxlOyB0ZXh0LWFuY2hvcjogbWlkZGxlOyI+Tm8gQWxidW0gQXJ0PC90ZXh0Pjwvc3ZnPg=="] {
+    background: #e8f0fe;
+    padding: 2rem;
+}
+
+.existing-playlists {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #eee;
+}
+
+.existing-playlist-item {
+    padding: 0.75rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.existing-playlist-item:hover {
+    background-color: #f0f2f5;
+}
+
+.existing-playlist-item i {
+    color: #1a73e8;
+}
+
+.new-playlist-section {
+    padding-top: 1rem;
+}
+
+.new-playlist-section h3 {
+    margin-bottom: 0.75rem;
+    font-size: 1rem;
+    color: #666;
+}
 
+.album-header {
+    padding: 2rem;
+    margin-bottom: 2rem;
+    background: #f8f9fa;
+    border-radius: 12px;
+}
+
+.album-info-large {
+    display: flex;
+    gap: 2rem;
+    align-items: flex-start;
+}
+
+.album-art-large {
+    width: 200px;
+    height: 200px;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.album-details {
+    flex: 1;
+}
+
+.album-details h2 {
+    margin-bottom: 0.5rem;
+    font-size: 2rem;
+}
+
+.album-details p {
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+.play-album-btn {
+    margin-top: 1rem;
+    background: #1a73e8;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 20px;
+    font-size: 1rem;
+}
+
+.play-album-btn:hover {
+    background: #1557b0;
+}
+
+.track-number {
+    color: #666;
+    margin-right: 1rem;
+    min-width: 2rem;
+}
+
+.music-item .track-info {
+    display: flex;
+    align-items: center;
+}
+
+/* Mobile menu button */
+.mobile-menu-btn {
+    display: none;
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    z-index: 1000;
+    background: white;
+    border: none;
+    padding: 0.5rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+}
+
+/* Media queries for responsive design */
+@media (max-width: 768px) {
     .container {
         grid-template-columns: 1fr;
     }
 
+    .mobile-menu-btn {
+        display: block;
+    }
+
     .sidebar {
         position: fixed;
-        left: 0;
+        left: -100%;
         top: 0;
         bottom: 0;
-        width: 280px;
-        z-index: 1001;
-        transform: translateX(-100%);
+        width: 80%;
+        max-width: 300px;
+        z-index: 1000;
+        transition: left 0.3s ease;
     }
 
     .sidebar.active {
-        transform: translateX(0);
-    }
-
-    .mobile-nav {
-        display: block;
-        height: 60px;
-    }
-
-    .main-content {
-        padding-bottom: 60px; /* Space for mobile nav */
-    }
-
-    .music-player {
-        padding: 0.5rem;
-    }
-
-    .player-controls {
-        flex-direction: column;
-        gap: 0.5rem;
+        left: 0;
     }
 
-    .volume-control {
-        display: none;
+    .now-playing {
+        grid-template-columns: auto 1fr;
     }
 
     .lyrics-container {
         display: none;
     }
 
-    /* Add hamburger menu button */
-    .menu-toggle {
-        display: block;
-        position: fixed;
-        top: 1rem;
-        left: 1rem;
-        z-index: 1002;
-        background: var(--primary-color);
-        color: white;
-        border: none;
-        border-radius: 50%;
-        width: 40px;
-        height: 40px;
-        cursor: pointer;
+    .main-content {
+        margin-bottom: 120px; /* Space for player */
     }
+}
 
-    /* Add overlay for sidebar */
-    .sidebar-overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 1000;
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-color: #121212;
+        --text-color: #ffffff;
+        --secondary-color: #282828;
     }
 
-    .sidebar-overlay.active {
-        display: block;
+    .sidebar,
+    .music-player,
+    .music-item {
+        background: #282828;
     }
-}
 
-.track-list .music-item {
-    padding: 0.75rem;
-    border-radius: 8px;
-}
-
-.album-grid, .artist-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    .modal-content {
+        background: #282828;
+        color: white;
+    }
 }
 
-.album-art-container, .artist-art-container {
-    width: 150px;
-    height: 150px;
+.sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    display: none;
 }
 
-@media (max-width: 480px) {
-    .album-grid, .artist-grid {
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    }
-
-    .album-art-container, .artist-art-container {
-        width: 120px;
-        height: 120px;
+@media (max-width: 768px) {
+    .sidebar-overlay {
+        display: block;
     }
 }
  

templates/index.html

@@ -8,33 +8,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
-    <button class="menu-toggle" id="menu-toggle">
-        <i class="fas fa-bars"></i>
-    </button>
-
-    <div class="sidebar-overlay" id="sidebar-overlay"></div>
-
-    <nav class="mobile-nav">
-        <ul>
-            <li><a href="#" data-view="all">
-                <i class="fas fa-music"></i>
-                <span>Songs</span>
-            </a></li>
-            <li><a href="#" data-view="albums">
-                <i class="fas fa-compact-disc"></i>
-                <span>Albums</span>
-            </a></li>
-            <li><a href="#" data-view="artists">
-                <i class="fas fa-user"></i>
-                <span>Artists</span>
-            </a></li>
-            <li><a href="#" data-view="playlists">
-                <i class="fas fa-list"></i>
-                <span>Playlists</span>
-            </a></li>
-        </ul>
-    </nav>
-
     <div class="container">
         <div class="sidebar">
             <nav>
@@ -131,5 +104,39 @@
 
     <audio id="audio-player"></audio>
     <script src="{{ url_for('static', filename='player.js') }}"></script>
+    <button class="mobile-menu-btn">
+        <i class="fas fa-bars"></i>
+    </button>
+    <script>
+        // Mobile menu handling
+        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+        const sidebar = document.querySelector('.sidebar');
+        const overlay = document.createElement('div');
+        overlay.className = 'sidebar-overlay';
+
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('active');
+            if (sidebar.classList.contains('active')) {
+                document.body.appendChild(overlay);
+            } else {
+                overlay.remove();
+            }
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('active');
+            overlay.remove();
+        });
+
+        // Close sidebar when clicking a menu item on mobile
+        document.querySelectorAll('.nav-menu a, .playlist-menu a').forEach(link => {
+            link.addEventListener('click', () => {
+                if (window.innerWidth <= 768) {
+                    sidebar.classList.remove('active');
+                    overlay.remove();
+                }
+            });
+        });
+    </script>
 </body>
 </html>