💫 link from category in navbar to category list page

books/models.py

@@ -10,6 +10,9 @@ class Category(models.Model):
     class Meta:
         verbose_name_plural = 'categories'
 
+    def get_absolute_url(self):
+        return reverse('books:category_list', args=[self.slug])
+
     def __str__(self):
         return self.name
 

books/urls.py

@@ -6,4 +6,5 @@
 urlpatterns = [
     path('', views.all_books, name='all_books'),
     path('book/<slug:slug>/', views.book_detail, name='book_detail'),
+    path('category/<slug:slug>/', views.category_list, name='category_list'),
 ]

books/views.py

@@ -15,3 +15,8 @@ def all_books(request):
 def book_detail(request, slug):
     book = get_object_or_404(Book, slug=slug)
     return render(request, 'library/books/detail.html', {'book': book})
+
+def category_list(request, slug):
+    category = get_object_or_404(Category, slug=slug)
+    books = Book.objects.filter(category=category)
+    return render(request, 'library/books/category.html', {'category': category, 'books': books})

templates/library/books/category.html

@@ -0,0 +1,40 @@
+{% extends '../base.html' %}
+{% load static %}
+{% block title %}Library | {{ category.name }}{% endblock title %}
+
+{% block content %}
+    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
+        <h1 class="display-4 fw-normal">{{ category.name }}</h1>
+    </div>
+
+    <div class="album py-5 bg-light">
+        <div class="container">
+            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+
+                {% for book in books %}
+
+                <div class="col">
+                    <a href="{{ book.get_absolute_url }}" class="text-decoration-none text-dark">
+                        <div class="card mb-3" style="max-width: 540px;">
+                            <div class="row g-0">
+                                <div class="col-md-4">
+                                    <img src="{{ book.image_url }}" class="img-fluid rounded-start" alt="book-cover">
+                                </div>
+                                <div class="col-md-8">
+                                    <div class="card-body">
+                                        <h5 class="card-title">{{ book.title|truncatechars:40 }}</h5>
+                                        <p class="card-text"><small class="text-muted">{{ book.author }}</small></p>
+                                        <p class="card-text">{{ book.description|truncatechars:80 }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+                {% endfor %}
+
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/library/books/detail.html

@@ -26,7 +26,7 @@ <h2 class="display-5 d-flex align-items-start justify-content-start gap-4" style
         </h2>
         <p class="lead">{{ book.author }}</p>
     </div>
-    <div class="bg-dark text-light shadow-sm mx-auto d-flex flex-column py-4 align-items-start justify-content-center gap-4" style="border-radius: 21px 21px 0 0; padding-left: 32%; padding-right: 15%;">
+    <div class="bg-dark text-light shadow-sm mx-auto d-flex flex-column py-5 align-items-start justify-content-center gap-4" style="border-radius: 21px 21px 0 0; padding-left: 32%; padding-right: 15%;">
         <div>{{ book.description }}</div>
         <button type="button" class="btn btn-outline-light">Borrow this book</button>
     </div>