Update templates/index.html

templates/index.html

@@ -20,7 +20,7 @@
         .search-button { padding: 10px 20px; border: none; border-radius: 25px; background-color: #3498db; color: white; cursor: pointer; font-size: 1em; }
         .search-button:hover { background-color: #2980b9; }
         .category-section { margin: 20px 0; }
-        .category-title { background-color: #3498db; color: white; padding: 10px; border-radius: 5px; cursor: pointer; user-select: none; }
+        .category-title { background-color: #3498db; color: white; padding: 10px; border-radius: 5px; user-select: none; }
         .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 15px; }
         .article-tile {
             background: white;
@@ -81,7 +81,7 @@
         <div class="sidebar">
             <h3>Categories</h3>
             <ul>
-                {% for category in categories %}
+                {% for category in categorized_articles.keys() %}
                     <li onclick="showCategory('{{ category }}')" id="sidebar-{{ category }}">{{ category }}</li>
                 {% endfor %}
             </ul>
@@ -118,7 +118,7 @@
 
         document.addEventListener('DOMContentLoaded', () => {
             const storedCategory = sessionStorage.getItem('currentCategory');
-            if (storedCategory) {
+            if (storedCategory && document.getElementById(`sidebar-${storedCategory}`)) {
                 showCategory(storedCategory);
             } else if (document.querySelector('.sidebar li')) {
                 showCategory(document.querySelector('.sidebar li').textContent);