content/search-results.php

@@ -77,6 +77,39 @@ $resultCount = count($results);
                 </div>
             </div>
 
+            <div class="s-res-sidebar-box">
+                <h3 class="s-res-sidebar-title">Kategorie filtern</h3>
+                <select id="category-filter" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
+                    <option value="all">Alle Kategorien</option>
+                    <option value="Deutsch">Deutsch</option>
+                    <option value="Englisch">Englisch</option>
+                    <option value="Franzoesisch">Französisch</option>
+                    <option value="Latein">Latein</option>
+                    <option value="Literatur">Literatur</option>
+                    <option value="Mathematik">Mathematik</option>
+                    <option value="Biologie">Biologie</option>
+                    <option value="Informatik">Informatik</option>
+                    <option value="Chemie">Chemie</option>
+                    <option value="Physik">Physik</option>
+                    <option value="Astronomie">Astronomie</option>
+                    <option value="Geschichte">Geschichte</option>
+                    <option value="Erdkunde">Erdkunde</option>
+                    <option value="Sozialkunde">Sozialkunde</option>
+                    <option value="Wirtschaftskunde">Wirtschaftskunde</option>
+                    <option value="Religion">Religion</option>
+                    <option value="Ethikunterricht">Ethikunterricht</option>
+                    <option value="Philosophie">Philosophie</option>
+                    <option value="Psychologie">Psychologie</option>
+                    <option value="Kunst">Kunst</option>
+                    <option value="Musik">Musik</option>
+                    <option value="Theater">Theater</option>
+                    <option value="Technik">Technik</option>
+                    <option value="Werken">Werken</option>
+                    <option value="Hauswirtschaft">Hauswirtschaft</option>
+                    <option value="Sport">Sport</option>
+                </select>
+            </div>
+
         </form>
 
     </aside>
@@ -94,7 +127,7 @@ $resultCount = count($results);
             if (!empty($results)): ?>
     
                 <?php foreach ($results as $item): ?>
-                    <div class="s-res-item" data-likes="<?php echo $item['likes'] ?? 0; ?>">
+                    <div class="s-res-item" data-likes="<?php echo $item['likes'] ?? 0; ?>" data-category="<?php echo strtolower($item['category'] ?? ''); ?>">
                         <div class="s-res-content">
                             <h2 class="s-res-item-title">
                                 <a href="index.php?pfad=showArticle&id=<?php echo $item['id']; ?>" class="s-res-link">
@@ -102,7 +135,7 @@ $resultCount = count($results);
                                 </a>
                             </h2>
                             <p class="s-res-author">Von: <span class="s-res-author-name"><?php echo htmlspecialchars($item['author']); ?></span></p>
-                            
+                            <p style="font-size: 0.8rem; color: #3b82f6; margin-top: 2px;">📁 <?php echo htmlspecialchars($item['category'] ?? 'Allgemein'); ?></p>
                             <p class="s-res-likes-display" style="font-size: 0.85rem; color: #64748b; margin-top: 4px;">
                                 👍 <?php echo $item['likes'] ?? 0; ?> Likes
                             </p>

index.php

@@ -56,6 +56,7 @@ if ($pfad === "deleteAccount") {
         <script src="js/sorter.js" async></script>
         <script src="js/comments.js" defer></script>
         <script src="js/editor.js" async></script>
+        <script src="js/filter.js" async></script>
 
         <title>EduForge</title>
     </head>

js/filter.js

@@ -0,0 +1,29 @@
+
+function initFilter() {
+    const filterSelect = document.getElementById('category-filter');
+    const listContainer = document.querySelector('.s-res-list');
+
+    if (!filterSelect || !listContainer) return;
+
+    filterSelect.addEventListener('change', function() {
+        const selectedCategory = this.value;
+        const cards = listContainer.querySelectorAll('.s-res-item');
+
+        cards.forEach(card => {
+            const cardCategory = card.getAttribute('data-category') || '';
+
+            if (selectedCategory === 'all' || cardCategory === selectedCategory) {
+                card.style.display = 'flex';
+            } else {
+                card.style.display = 'none';
+            }
+        });
+    });
+}
+
+// ist das DOM bereits vollständig aufgebaut?
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFilter);
+} else {
+    initSorter();
+}