hiding

index.html

@@ -755,7 +755,7 @@
                     </div>
                     <nav class="sidebar-nav main">
                         <ul>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-home">
                                 <a href="/">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -777,7 +777,7 @@
                                     <span>Home</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-library">
                                 <a href="/library">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -798,7 +798,7 @@
                                     <span>Library</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-recent">
                                 <a href="/recent">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -818,7 +818,7 @@
                                     <span>Recent</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-unreleased">
                                 <a href="/unreleased">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -839,7 +839,7 @@
                                     <span>Unreleased</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-donate">
                                 <a href="https://pally.gg/p/monochrome" target="_blank" rel="noopener noreferrer">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -864,7 +864,7 @@
                                     <span>Donate</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-settings">
                                 <a href="/settings">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -885,7 +885,7 @@
                                     <span>Settings</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-account">
                                 <a href="/account">
                                     <svg
                                         width="24"
@@ -923,7 +923,7 @@
                     </nav>
                     <nav class="sidebar-nav">
                         <ul>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-about">
                                 <a href="/about">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -944,7 +944,7 @@
                                     <span>About</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-download">
                                 <a href="/download">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -964,7 +964,7 @@
                                     <span>Download</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                            <li class="nav-item" id="sidebar-nav-discord">
                                 <a href="https://monochrome.samidy.com/discord" target="_blank">
                                     <svg
                                         width="64px"
@@ -2151,6 +2151,111 @@
                             </div>
                         </div>
 
+                        <div class="settings-group">
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Home in Sidebar</span>
+                                    <span class="description">Display the Home link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-home-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Library in Sidebar</span>
+                                    <span class="description">Display the Library link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-library-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Recent in Sidebar</span>
+                                    <span class="description">Display the Recent link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-recent-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Unreleased in Sidebar</span>
+                                    <span class="description"
+                                        >Display the Unreleased link in the sidebar navigation</span
+                                    >
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-unreleased-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Donate in Sidebar</span>
+                                    <span class="description">Display the Donate link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-donate-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Settings in Sidebar</span>
+                                    <span class="description">Display the Settings link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-settings-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Account in Sidebar</span>
+                                    <span class="description">Display the Account link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-account-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show About in Sidebar</span>
+                                    <span class="description">Display the About link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-about-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Download in Sidebar</span>
+                                    <span class="description">Display the Download link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-download-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Discord in Sidebar</span>
+                                    <span class="description">Display the Discord link in the sidebar navigation</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="sidebar-show-discord-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                        </div>
+
                         <div class="settings-group">
                             <div class="setting-item">
                                 <div class="info">

js/settings.js

@@ -18,6 +18,7 @@ import {
     equalizerSettings,
     listenBrainzSettings,
     homePageSettings,
+    sidebarSectionSettings,
 } from './storage.js';
 import { audioContextManager, EQ_PRESETS } from './audio-context.js';
 import { db } from './db.js';
@@ -708,6 +709,100 @@ export function initializeSettings(scrobbler, player, api, ui) {
         });
     }
 
+    // Sidebar Section Toggles
+    const sidebarShowHomeToggle = document.getElementById('sidebar-show-home-toggle');
+    if (sidebarShowHomeToggle) {
+        sidebarShowHomeToggle.checked = sidebarSectionSettings.shouldShowHome();
+        sidebarShowHomeToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowHome(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowLibraryToggle = document.getElementById('sidebar-show-library-toggle');
+    if (sidebarShowLibraryToggle) {
+        sidebarShowLibraryToggle.checked = sidebarSectionSettings.shouldShowLibrary();
+        sidebarShowLibraryToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowLibrary(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowRecentToggle = document.getElementById('sidebar-show-recent-toggle');
+    if (sidebarShowRecentToggle) {
+        sidebarShowRecentToggle.checked = sidebarSectionSettings.shouldShowRecent();
+        sidebarShowRecentToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowRecent(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowUnreleasedToggle = document.getElementById('sidebar-show-unreleased-toggle');
+    if (sidebarShowUnreleasedToggle) {
+        sidebarShowUnreleasedToggle.checked = sidebarSectionSettings.shouldShowUnreleased();
+        sidebarShowUnreleasedToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowUnreleased(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowDonateToggle = document.getElementById('sidebar-show-donate-toggle');
+    if (sidebarShowDonateToggle) {
+        sidebarShowDonateToggle.checked = sidebarSectionSettings.shouldShowDonate();
+        sidebarShowDonateToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowDonate(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowSettingsToggle = document.getElementById('sidebar-show-settings-toggle');
+    if (sidebarShowSettingsToggle) {
+        sidebarShowSettingsToggle.checked = sidebarSectionSettings.shouldShowSettings();
+        sidebarShowSettingsToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowSettings(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowAccountToggle = document.getElementById('sidebar-show-account-toggle');
+    if (sidebarShowAccountToggle) {
+        sidebarShowAccountToggle.checked = sidebarSectionSettings.shouldShowAccount();
+        sidebarShowAccountToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowAccount(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowAboutToggle = document.getElementById('sidebar-show-about-toggle');
+    if (sidebarShowAboutToggle) {
+        sidebarShowAboutToggle.checked = sidebarSectionSettings.shouldShowAbout();
+        sidebarShowAboutToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowAbout(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowDownloadToggle = document.getElementById('sidebar-show-download-toggle');
+    if (sidebarShowDownloadToggle) {
+        sidebarShowDownloadToggle.checked = sidebarSectionSettings.shouldShowDownload();
+        sidebarShowDownloadToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowDownload(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    const sidebarShowDiscordToggle = document.getElementById('sidebar-show-discord-toggle');
+    if (sidebarShowDiscordToggle) {
+        sidebarShowDiscordToggle.checked = sidebarSectionSettings.shouldShowDiscord();
+        sidebarShowDiscordToggle.addEventListener('change', (e) => {
+            sidebarSectionSettings.setShowDiscord(e.target.checked);
+            sidebarSectionSettings.applySidebarVisibility();
+        });
+    }
+
+    // Apply sidebar visibility on initialization
+    sidebarSectionSettings.applySidebarVisibility();
+
     // Filename template setting
     const filenameTemplate = document.getElementById('filename-template');
     if (filenameTemplate) {

js/storage.js

@@ -958,6 +958,171 @@ export const homePageSettings = {
     },
 };
 
+export const sidebarSectionSettings = {
+    SHOW_HOME_KEY: 'sidebar-show-home',
+    SHOW_LIBRARY_KEY: 'sidebar-show-library',
+    SHOW_RECENT_KEY: 'sidebar-show-recent',
+    SHOW_UNRELEASED_KEY: 'sidebar-show-unreleased',
+    SHOW_DONATE_KEY: 'sidebar-show-donate',
+    SHOW_SETTINGS_KEY: 'sidebar-show-settings',
+    SHOW_ACCOUNT_KEY: 'sidebar-show-account',
+    SHOW_ABOUT_KEY: 'sidebar-show-about',
+    SHOW_DOWNLOAD_KEY: 'sidebar-show-download',
+    SHOW_DISCORD_KEY: 'sidebar-show-discord',
+
+    shouldShowHome() {
+        try {
+            const val = localStorage.getItem(this.SHOW_HOME_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowHome(enabled) {
+        localStorage.setItem(this.SHOW_HOME_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowLibrary() {
+        try {
+            const val = localStorage.getItem(this.SHOW_LIBRARY_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowLibrary(enabled) {
+        localStorage.setItem(this.SHOW_LIBRARY_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowRecent() {
+        try {
+            const val = localStorage.getItem(this.SHOW_RECENT_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowRecent(enabled) {
+        localStorage.setItem(this.SHOW_RECENT_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowUnreleased() {
+        try {
+            const val = localStorage.getItem(this.SHOW_UNRELEASED_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowUnreleased(enabled) {
+        localStorage.setItem(this.SHOW_UNRELEASED_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowDonate() {
+        try {
+            const val = localStorage.getItem(this.SHOW_DONATE_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowDonate(enabled) {
+        localStorage.setItem(this.SHOW_DONATE_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowSettings() {
+        try {
+            const val = localStorage.getItem(this.SHOW_SETTINGS_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowSettings(enabled) {
+        localStorage.setItem(this.SHOW_SETTINGS_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowAccount() {
+        try {
+            const val = localStorage.getItem(this.SHOW_ACCOUNT_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowAccount(enabled) {
+        localStorage.setItem(this.SHOW_ACCOUNT_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowAbout() {
+        try {
+            const val = localStorage.getItem(this.SHOW_ABOUT_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowAbout(enabled) {
+        localStorage.setItem(this.SHOW_ABOUT_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowDownload() {
+        try {
+            const val = localStorage.getItem(this.SHOW_DOWNLOAD_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowDownload(enabled) {
+        localStorage.setItem(this.SHOW_DOWNLOAD_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowDiscord() {
+        try {
+            const val = localStorage.getItem(this.SHOW_DISCORD_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowDiscord(enabled) {
+        localStorage.setItem(this.SHOW_DISCORD_KEY, enabled ? 'true' : 'false');
+    },
+
+    applySidebarVisibility() {
+        const items = [
+            { id: 'sidebar-nav-home', check: this.shouldShowHome() },
+            { id: 'sidebar-nav-library', check: this.shouldShowLibrary() },
+            { id: 'sidebar-nav-recent', check: this.shouldShowRecent() },
+            { id: 'sidebar-nav-unreleased', check: this.shouldShowUnreleased() },
+            { id: 'sidebar-nav-donate', check: this.shouldShowDonate() },
+            { id: 'sidebar-nav-settings', check: this.shouldShowSettings() },
+            { id: 'sidebar-nav-account', check: this.shouldShowAccount() },
+            { id: 'sidebar-nav-about', check: this.shouldShowAbout() },
+            { id: 'sidebar-nav-download', check: this.shouldShowDownload() },
+            { id: 'sidebar-nav-discord', check: this.shouldShowDiscord() },
+        ];
+
+        items.forEach(({ id, check }) => {
+            const el = document.getElementById(id);
+            if (el) {
+                el.style.display = check ? '' : 'none';
+            }
+        });
+    },
+};
+
 // System theme listener
 if (typeof window !== 'undefined' && window.matchMedia) {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {