feat: replace color dropdown with clickable links in catalog sidebar

- Updated `side-bar.html` to use clickable links instead of a dropdown for color selection
- Enhanced catalog view to generate URLs for color filters and "any color" option
- Simplified the user experience for color filtering and improved accessibility

items/views.py

@@ -167,6 +167,26 @@ def index(request: HttpRequest, category: str | None = None) -> HttpResponse:
 
     color_item_ids = {c.id for item in items for c in item.colors.all()}
     available_colors = list(Color.objects.filter(id__in=color_item_ids))
+    any_color_url = _build_catalog_url(
+        selected_category.id,
+        selected_subcategory.id,
+        search_query=search_query,
+        min_price=min_price_raw,
+        max_price=max_price_raw,
+        sale=filter_sale,
+        new=filter_new,
+    )
+    for color in available_colors:
+        color.catalog_url = _build_catalog_url(
+            selected_category.id,
+            selected_subcategory.id,
+            search_query=search_query,
+            min_price=min_price_raw,
+            max_price=max_price_raw,
+            sale=filter_sale,
+            new=filter_new,
+            color=str(color.id),
+        )
 
     if selected_color_id_raw:
         try:
@@ -266,6 +286,7 @@ def index(request: HttpRequest, category: str | None = None) -> HttpResponse:
         'paginator': paginator,
         'pagination_query_string': pagination_query_string,
         'available_colors': available_colors,
+        'any_color_url': any_color_url,
         'selected_color_id': selected_color_id_raw,
         'selected_category': selected_category,
         'selected_subcategory': selected_subcategory,

templates/catalog/_fragments/side-bar.html

@@ -88,14 +88,12 @@
         {% if available_colors %}
         <section class="a-section color-section">
             <h2>Цвет</h2>
-            <select name="color" onchange="this.form.submit()">
+            <a href="{{ any_color_url }}" class="category {% if not selected_color_id %}active{% endif %}">Любой</a>
-                <option value="">Любой</option>
+            {% for color in available_colors %}
-                {% for color in available_colors %}
+                <a href="{{ color.catalog_url }}" class="category {% if selected_color_id == color.id|stringformat:"i" %}active{% endif %}">
-                    <option value="{{ color.id }}" {% if selected_color_id == color.id|stringformat:"i" %}selected{% endif %}>
+                    {{ color.name }}
-                        {{ color.name }}
+                </a>
-                    </option>
+            {% endfor %}
-                {% endfor %}
-            </select>
         </section>
         {% endif %}
     </form>