feat: make major sidebar navigation sections collapsible and persist their state in localStorage

static/theme.css

@@ -181,13 +181,36 @@ body {
     transform: rotate(-90deg);
 }
 
-.nav-section-label {
+.nav-section-header {
     font-size: var(--font-size-xs);
     text-transform: uppercase;
     color: var(--color-label-muted);
     font-weight: var(--font-weight-semi);
     letter-spacing: 0.08em;
-    padding: var(--spacing-md) 0.9rem 0.4rem;
+    padding: var(--spacing-sm) 0.9rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: background 0.15s, color 0.15s;
+    margin-top: var(--spacing-md);
+    margin-bottom: 0.2rem;
+}
+
+.nav-section-header:hover {
+    background: var(--color-bg-input);
+    color: var(--color-text-heading);
+}
+
+.nav-section-header .nav-chevron {
+    font-size: 0.65rem;
+    color: var(--color-text-disabled);
+    transition: transform 0.2s ease;
+}
+
+.nav-section-header.collapsed .nav-chevron {
+    transform: rotate(-90deg);
 }
 
 .nav-link.disabled {

templates/layout.html

@@ -26,154 +26,174 @@
         </a>
 
         <!-- 🎙️ ÂM THANH & LỒNG TIẾNG -->
-        <div class="nav-section-label">ÂM THANH & LỒNG TIẾNG</div>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/tts') %}active{% endif %}"
-           href="/tts/vieneu"
-           data-bs-toggle="collapse"
-           data-bs-target="#tts-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/tts') else 'false' }}"
-           onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-microphone-alt"></i> Text to Speech</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/tts') %}collapsed{% endif %}"></i>
-        </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/tts') %}show{% endif %}" id="tts-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/tts/vieneu' %}active{% endif %}" href="/tts/vieneu">
-                <i class="fas fa-dragon"></i> VieNeu-TTS
+        <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#audio-group" aria-expanded="true">
+            <span>ÂM THANH & LỒNG TIẾNG</span>
+            <i class="fas fa-chevron-down nav-chevron"></i>
+        </div>
+        <div class="collapse show nav-sub-group" id="audio-group">
+            <a class="nav-link nav-link-collapsible {% if request.path.startswith('/tts') %}active{% endif %}"
+               href="/tts/vieneu"
+               data-bs-toggle="collapse"
+               data-bs-target="#tts-sub"
+               aria-expanded="{{ 'true' if request.path.startswith('/tts') else 'false' }}"
+               onclick="return handleNavCollapse(event, this)">
+                <span><i class="fas fa-microphone-alt"></i> Text to Speech</span>
+                <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/tts') %}collapsed{% endif %}"></i>
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/tts/gtts' %}active{% endif %}" href="/tts/gtts">
-                <i class="fab fa-google"></i> Google TTS
+            <div class="collapse nav-sub {% if request.path.startswith('/tts') %}show{% endif %}" id="tts-sub">
+                <a class="nav-link nav-link-sub {% if request.path == '/tts/vieneu' %}active{% endif %}" href="/tts/vieneu">
+                    <i class="fas fa-dragon"></i> VieNeu-TTS
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/tts/gtts' %}active{% endif %}" href="/tts/gtts">
+                    <i class="fab fa-google"></i> Google TTS
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/tts/edge' %}active{% endif %}" href="/tts/edge">
+                    <i class="fab fa-microsoft"></i> Edge TTS
+                </a>
+            </div>
+            <a class="nav-link {% if request.path.startswith('/audio-story-studio') %}active{% endif %}" href="/audio-story-studio">
+                <i class="fas fa-podcast"></i> AI Audio Story Studio
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/tts/edge' %}active{% endif %}" href="/tts/edge">
-                <i class="fab fa-microsoft"></i> Edge TTS
+            <a class="nav-link {% if request.path.startswith('/podcast-studio') %}active{% endif %}" href="/podcast-studio">
+                <i class="fas fa-microphone"></i> AI Podcast Studio
             </a>
         </div>
-        <a class="nav-link {% if request.path.startswith('/audio-story-studio') %}active{% endif %}" href="/audio-story-studio">
-            <i class="fas fa-podcast"></i> AI Audio Story Studio
-        </a>
-        <a class="nav-link {% if request.path.startswith('/podcast-studio') %}active{% endif %}" href="/podcast-studio">
-            <i class="fas fa-microphone"></i> AI Podcast Studio
-        </a>
 
         <!-- 🎬 HÌNH ẢNH & VIDEO AI -->
-        <div class="nav-section-label">HÌNH ẢNH & VIDEO AI</div>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/image-studio') %}active{% endif %}"
-           href="/image-studio/remove-bg"
-           data-bs-toggle="collapse"
-           data-bs-target="#image-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/image-studio') else 'false' }}"
-           onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-image"></i> Image Studio</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/image-studio') %}collapsed{% endif %}"></i>
-        </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/image-studio') %}show{% endif %}" id="image-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/remove-bg' %}active{% endif %}" href="/image-studio/remove-bg">
-                <i class="fas fa-cut"></i> Xóa nền
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/upscale' %}active{% endif %}" href="/image-studio/upscale">
-                <i class="fas fa-expand-arrows-alt"></i> Nâng cấp ảnh
-            </a>
+        <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#video-group" aria-expanded="true">
+            <span>HÌNH ẢNH & VIDEO AI</span>
+            <i class="fas fa-chevron-down nav-chevron"></i>
         </div>
-        <a class="nav-link {% if request.path.startswith('/comic-creator') %}active{% endif %}" href="/comic-creator">
-            <i class="fas fa-book-open"></i> AI Comic Creator
-        </a>
-        <a class="nav-link {% if request.path.startswith('/video-ai') %}active{% endif %}" href="/video-ai">
-            <i class="fas fa-video"></i> Video AI
-        </a>
-        <a class="nav-link {% if request.path.startswith('/shorts-generator') %}active{% endif %}" href="/shorts-generator">
-            <i class="fas fa-mobile-alt"></i> AI Shorts Generator
-        </a>
-
-        <!-- ✍️ TRỢ LÝ NỘI DUNG -->
-        <div class="nav-section-label">TRỢ LÝ NỘI DUNG</div>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/prompt-generator') %}active{% endif %}"
-           href="/prompt-generator/code"
-           data-bs-toggle="collapse"
-           data-bs-target="#prompt-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/prompt-generator') else 'false' }}"
-           onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-magic"></i> AI Prompt Studio</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/prompt-generator') %}collapsed{% endif %}"></i>
-        </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/prompt-generator') %}show{% endif %}" id="prompt-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/code' %}active{% endif %}" href="/prompt-generator/code">
-                <i class="fas fa-code"></i> Lập trình (Code)
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video' %}active{% endif %}" href="/prompt-generator/video">
-                <i class="fas fa-video"></i> Ảnh / Video AI
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/music' %}active{% endif %}" href="/prompt-generator/music">
-                <i class="fas fa-music"></i> Nhạc (Suno/Udio)
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/story' %}active{% endif %}" href="/prompt-generator/story">
-                <i class="fas fa-book"></i> Kịch bản truyện
+        <div class="collapse show nav-sub-group" id="video-group">
+            <a class="nav-link nav-link-collapsible {% if request.path.startswith('/image-studio') %}active{% endif %}"
+               href="/image-studio/remove-bg"
+               data-bs-toggle="collapse"
+               data-bs-target="#image-sub"
+               aria-expanded="{{ 'true' if request.path.startswith('/image-studio') else 'false' }}"
+               onclick="return handleNavCollapse(event, this)">
+                <span><i class="fas fa-image"></i> Image Studio</span>
+                <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/image-studio') %}collapsed{% endif %}"></i>
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video-script' %}active{% endif %}" href="/prompt-generator/video-script">
-                <i class="fas fa-film"></i> Kịch bản Video
+            <div class="collapse nav-sub {% if request.path.startswith('/image-studio') %}show{% endif %}" id="image-sub">
+                <a class="nav-link nav-link-sub {% if request.path == '/image-studio/remove-bg' %}active{% endif %}" href="/image-studio/remove-bg">
+                    <i class="fas fa-cut"></i> Xóa nền
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/image-studio/upscale' %}active{% endif %}" href="/image-studio/upscale">
+                    <i class="fas fa-expand-arrows-alt"></i> Nâng cấp ảnh
+                </a>
+            </div>
+            <a class="nav-link {% if request.path.startswith('/comic-creator') %}active{% endif %}" href="/comic-creator">
+                <i class="fas fa-book-open"></i> AI Comic Creator
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/audio-story' %}active{% endif %}" href="/prompt-generator/audio-story">
-                <i class="fas fa-headphones"></i> Truyện Audio
+            <a class="nav-link {% if request.path.startswith('/video-ai') %}active{% endif %}" href="/video-ai">
+                <i class="fas fa-video"></i> Video AI
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/marketing' %}active{% endif %}" href="/prompt-generator/marketing">
-                <i class="fas fa-ad"></i> Marketing / Content
+            <a class="nav-link {% if request.path.startswith('/shorts-generator') %}active{% endif %}" href="/shorts-generator">
+                <i class="fas fa-mobile-alt"></i> AI Shorts Generator
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/education' %}active{% endif %}" href="/prompt-generator/education">
-                <i class="fas fa-graduation-cap"></i> Học tập / Ngoại ngữ
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/data' %}active{% endif %}" href="/prompt-generator/data">
-                <i class="fas fa-chart-line"></i> Phân tích dữ liệu
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/office' %}active{% endif %}" href="/prompt-generator/office">
-                <i class="fas fa-briefcase"></i> Trợ lý văn phòng
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/brainstorm' %}active{% endif %}" href="/prompt-generator/brainstorm">
-                <i class="fas fa-lightbulb"></i> Lên ý tưởng
+        </div>
+
+        <!-- ✍️ TRỢ LÝ NỘI DUNG -->
+        <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#content-group" aria-expanded="true">
+            <span>TRỢ LÝ NỘI DUNG</span>
+            <i class="fas fa-chevron-down nav-chevron"></i>
+        </div>
+        <div class="collapse show nav-sub-group" id="content-group">
+            <a class="nav-link nav-link-collapsible {% if request.path.startswith('/prompt-generator') %}active{% endif %}"
+               href="/prompt-generator/code"
+               data-bs-toggle="collapse"
+               data-bs-target="#prompt-sub"
+               aria-expanded="{{ 'true' if request.path.startswith('/prompt-generator') else 'false' }}"
+               onclick="return handleNavCollapse(event, this)">
+                <span><i class="fas fa-magic"></i> AI Prompt Studio</span>
+                <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/prompt-generator') %}collapsed{% endif %}"></i>
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/enhancer' %}active{% endif %}" href="/prompt-generator/enhancer">
-                <i class="fas fa-wand-magic-sparkles"></i> Tối ưu Prompt thô
+            <div class="collapse nav-sub {% if request.path.startswith('/prompt-generator') %}show{% endif %}" id="prompt-sub">
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/code' %}active{% endif %}" href="/prompt-generator/code">
+                    <i class="fas fa-code"></i> Lập trình (Code)
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video' %}active{% endif %}" href="/prompt-generator/video">
+                    <i class="fas fa-video"></i> Ảnh / Video AI
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/music' %}active{% endif %}" href="/prompt-generator/music">
+                    <i class="fas fa-music"></i> Nhạc (Suno/Udio)
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/story' %}active{% endif %}" href="/prompt-generator/story">
+                    <i class="fas fa-book"></i> Kịch bản truyện
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video-script' %}active{% endif %}" href="/prompt-generator/video-script">
+                    <i class="fas fa-film"></i> Kịch bản Video
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/audio-story' %}active{% endif %}" href="/prompt-generator/audio-story">
+                    <i class="fas fa-headphones"></i> Truyện Audio
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/marketing' %}active{% endif %}" href="/prompt-generator/marketing">
+                    <i class="fas fa-ad"></i> Marketing / Content
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/education' %}active{% endif %}" href="/prompt-generator/education">
+                    <i class="fas fa-graduation-cap"></i> Học tập / Ngoại ngữ
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/data' %}active{% endif %}" href="/prompt-generator/data">
+                    <i class="fas fa-chart-line"></i> Phân tích dữ liệu
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/office' %}active{% endif %}" href="/prompt-generator/office">
+                    <i class="fas fa-briefcase"></i> Trợ lý văn phòng
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/brainstorm' %}active{% endif %}" href="/prompt-generator/brainstorm">
+                    <i class="fas fa-lightbulb"></i> Lên ý tưởng
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/enhancer' %}active{% endif %}" href="/prompt-generator/enhancer">
+                    <i class="fas fa-wand-magic-sparkles"></i> Tối ưu Prompt thô
+                </a>
+            </div>
+            <a class="nav-link {% if request.path.startswith('/omnichannel-writer') %}active{% endif %}" href="/omnichannel-writer">
+                <i class="fas fa-paper-plane"></i> AI Omnichannel Writer
             </a>
         </div>
-        <a class="nav-link {% if request.path.startswith('/omnichannel-writer') %}active{% endif %}" href="/omnichannel-writer">
-            <i class="fas fa-paper-plane"></i> AI Omnichannel Writer
-        </a>
 
         <!-- 💼 DỊCH THUẬT & TÀI LIỆU -->
-        <div class="nav-section-label">DỊCH THUẬT & TÀI LIỆU</div>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/translator') %}active{% endif %}"
-           href="/translator/text"
-           data-bs-toggle="collapse"
-           data-bs-target="#translator-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/translator') else 'false' }}"
-           onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-language"></i> AI Translator</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/translator') %}collapsed{% endif %}"></i>
-        </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/translator') %}show{% endif %}" id="translator-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/translator/text' %}active{% endif %}" href="/translator/text">
-                <i class="fas fa-font"></i> Văn bản
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/translator/file' %}active{% endif %}" href="/translator/file">
-                <i class="fas fa-file-alt"></i> Tài liệu
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/translator/image' %}active{% endif %}" href="/translator/image">
-                <i class="fas fa-image"></i> Dịch ảnh
-            </a>
+        <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#docs-group" aria-expanded="true">
+            <span>DỊCH THUẬT & TÀI LIỆU</span>
+            <i class="fas fa-chevron-down nav-chevron"></i>
         </div>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/pdf') %}active{% endif %}"
-           href="/pdf/summarize"
-           data-bs-toggle="collapse"
-           data-bs-target="#pdf-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/pdf') else 'false' }}"
-           onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-file-pdf"></i> Smart PDF</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/pdf') %}collapsed{% endif %}"></i>
-        </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/pdf') %}show{% endif %}" id="pdf-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/pdf/summarize' %}active{% endif %}" href="/pdf/summarize">
-                <i class="fas fa-align-left"></i> Tóm tắt
+        <div class="collapse show nav-sub-group" id="docs-group">
+            <a class="nav-link nav-link-collapsible {% if request.path.startswith('/translator') %}active{% endif %}"
+               href="/translator/text"
+               data-bs-toggle="collapse"
+               data-bs-target="#translator-sub"
+               aria-expanded="{{ 'true' if request.path.startswith('/translator') else 'false' }}"
+               onclick="return handleNavCollapse(event, this)">
+                <span><i class="fas fa-language"></i> AI Translator</span>
+                <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/translator') %}collapsed{% endif %}"></i>
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/pdf/extract' %}active{% endif %}" href="/pdf/extract">
-                <i class="fas fa-table"></i> Trích xuất dữ liệu
+            <div class="collapse nav-sub {% if request.path.startswith('/translator') %}show{% endif %}" id="translator-sub">
+                <a class="nav-link nav-link-sub {% if request.path == '/translator/text' %}active{% endif %}" href="/translator/text">
+                    <i class="fas fa-font"></i> Văn bản
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/translator/file' %}active{% endif %}" href="/translator/file">
+                    <i class="fas fa-file-alt"></i> Tài liệu
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/translator/image' %}active{% endif %}" href="/translator/image">
+                    <i class="fas fa-image"></i> Dịch ảnh
+                </a>
+            </div>
+            <a class="nav-link nav-link-collapsible {% if request.path.startswith('/pdf') %}active{% endif %}"
+               href="/pdf/summarize"
+               data-bs-toggle="collapse"
+               data-bs-target="#pdf-sub"
+               aria-expanded="{{ 'true' if request.path.startswith('/pdf') else 'false' }}"
+               onclick="return handleNavCollapse(event, this)">
+                <span><i class="fas fa-file-pdf"></i> Smart PDF</span>
+                <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/pdf') %}collapsed{% endif %}"></i>
             </a>
+            <div class="collapse nav-sub {% if request.path.startswith('/pdf') %}show{% endif %}" id="pdf-sub">
+                <a class="nav-link nav-link-sub {% if request.path == '/pdf/summarize' %}active{% endif %}" href="/pdf/summarize">
+                    <i class="fas fa-align-left"></i> Tóm tắt
+                </a>
+                <a class="nav-link nav-link-sub {% if request.path == '/pdf/extract' %}active{% endif %}" href="/pdf/extract">
+                    <i class="fas fa-table"></i> Trích xuất dữ liệu
+                </a>
+            </div>
         </div>
     </nav>
 </div>
@@ -237,15 +257,50 @@
         }
     });
 
+    // Restore collapsible states from localStorage on load
+    document.querySelectorAll('.sidebar .collapse').forEach(target => {
+        const id = target.getAttribute('id');
+        const state = localStorage.getItem('nav-group-' + id);
+        const trigger = document.querySelector(`[data-bs-target="#${id}"]`);
+        
+        if (state === 'collapsed') {
+            target.classList.remove('show');
+            if (trigger) {
+                trigger.classList.add('collapsed');
+                trigger.setAttribute('aria-expanded', 'false');
+                trigger.querySelector('.nav-chevron')?.classList.add('collapsed');
+            }
+        } else if (state === 'expanded') {
+            target.classList.add('show');
+            if (trigger) {
+                trigger.classList.remove('collapsed');
+                trigger.setAttribute('aria-expanded', 'true');
+                trigger.querySelector('.nav-chevron')?.classList.remove('collapsed');
+            }
+        }
+    });
+
+    // Listen to collapse show/hide events to save states to localStorage
     document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => {
         const targetId = el.getAttribute('data-bs-target');
         const target = document.querySelector(targetId);
         if (!target) return;
+        
         target.addEventListener('show.bs.collapse', () => {
+            el.classList.remove('collapsed');
+            el.setAttribute('aria-expanded', 'true');
             el.querySelector('.nav-chevron')?.classList.remove('collapsed');
+            
+            const id = target.getAttribute('id');
+            localStorage.setItem('nav-group-' + id, 'expanded');
         });
         target.addEventListener('hide.bs.collapse', () => {
+            el.classList.add('collapsed');
+            el.setAttribute('aria-expanded', 'false');
             el.querySelector('.nav-chevron')?.classList.add('collapsed');
+            
+            const id = target.getAttribute('id');
+            localStorage.setItem('nav-group-' + id, 'collapsed');
         });
     });
 </script>