add side navigation menu

shyanukant · Jul 19, 2023 · f195b7d · f195b7d
1 parent 2da9226
commit f195b7d
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 86 deletions.
diff --git a/squib/profiles/tests.py b/squib/profiles/tests.py
@@ -33,10 +33,9 @@ def test_following(self):
 
     def test_follow_api_endpoint(self):
         client = self.get_client()
-        response = client.post(f"/api/profile/{self.user2.username}/follow", {"action":"follow"})
-        print(response)
+        response = client.post(f"/api/profile/{self.user2.username}/follow/", {"action":"follow"})
         r_data = response.json()
-        count = r_data.get("followers")
+        count = r_data.get("follower_count")
         self.assertEqual(count, 1)
 
     def test_unfollow_api_endpoint(self):
@@ -45,14 +44,14 @@ def test_unfollow_api_endpoint(self):
         first.profile.followers.add(second)
 
         client = self.get_client()
-        response = client.post(f"/api/profile/{second.username}/follow", {"action":"unfollow"})
+        response = client.post(f"/api/profile/{second.username}/follow/", {"action":"unfollow"})
         r_data = response.json()
-        count = r_data.get("followers")
+        count = r_data.get("follower_count")
         self.assertEqual(count, 0)
 
     def test_cannot_follow_api_endpoint(self):
         client = self.get_client()
-        response = client.post(f"/api/profile/{self.user1.username}/follow", {"action":"follow"})
+        response = client.post(f"/api/profile/{self.user1.username}/follow/", {"action":"follow"})
         r_data = response.json()
-        count = r_data.get("followers")
+        count = r_data.get("follower_count")
         self.assertEqual(count, 0)
diff --git a/squib/profiles/urls.py b/squib/profiles/urls.py
@@ -2,7 +2,7 @@
 from .views import profile_view, update_profile_view
 
 urlpatterns = [
-    path("<str:username>", profile_view),
-    path("edit/", update_profile_view)
+    path("<str:username>", profile_view, name='profile'),
+    path("edit/", update_profile_view, name='edit')
 
 ]
diff --git a/squib/squib/settings.py b/squib/squib/settings.py
@@ -40,6 +40,11 @@
 
 LOGIN_URL = "/login"
 
+#Form template
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
+
+CRISPY_TEMPLATE_PACK = "bootstrap5"
+
 # Application definition
 
 INSTALLED_APPS = [
@@ -53,6 +58,8 @@
     # extension/ libraries
     "rest_framework",
     "corsheaders",
+    "crispy_forms",
+    "crispy_bootstrap5",
 
     # application
     "tweet.apps.TweetConfig",

diff --git a/squib/templates/account/auth.html b/squib/templates/account/auth.html
@@ -1,16 +1,16 @@
 {% extends "base.html" %}
 
 {% block title %}{{ title }}{% endblock %}
-
+{% load crispy_forms_tags %}
 {% block content %}
-<div class="col-10 mx-auto">
-    <h1> {{ title }} </h1>
+<div class="col-10 mt-5 mx-auto">
+    <h1 class="fs-2"> {{ title }} </h1>
     {% if description %}
     <p>{{ description }}</p>
     {% endif %}
     <form action="" method="post">
         {% csrf_token %}
-        {{form.as_p}}
+        {{form|crispy}}
         <button type="submit" class="btn btn-outline-success">{{ btn_label }}</button>
     </form>
 </div>

diff --git a/squib/templates/base.html b/squib/templates/base.html
@@ -6,51 +6,34 @@
     <title>Squib-{% block title %} {% endblock %}</title>
     <link rel="icon" href="/favicon.ico" />
     <link href="/dist/output.css" rel="stylesheet">
-    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+
     <meta name="theme-color" content="#000000" />
     {% include "react/css.html" %}
+
   </head>
   <body><noscript>You need to enable JavaScript to run this app.</noscript>
-    <div class="flex h-screen">
-      <nav class="w-1/4 bg-gray-800 text-white">
-        <!-- Logo  -->
-        <div class="p-4 cursor-pointer">
-          <a class="text-xl font-bold" href="#">Squib</a>
+    <div class="container-fluid">
+      <div class="row">
+        <!-- Sidebar -->
+        {% if user.is_authenticated %}
+        <div class="col-md-3  ">
+          <!-- Your sidebar content goes here -->
+          {% include "components/navbar.html" %}
         </div>
-        <!-- Navigation items  -->
-        <div>
-          <ul class="py-4 ">
-            <li class="pl-4 py-2">
-              <a class="" aria-current="page" href="#">Home</a>
-            </li>
-            <li class="pl-4 py-2">
-              <!-- Setting -->
-              <div class="relative">
-                <span class="flex items-center cursor-pointer">
-                  Settings
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd"
-                      d="M8 1a1 1 0 00-.707.293l-3 3a1 1 0 000 1.414l8 8a1 1 0 001.414 0l3-3A1 1 0 0017 9V3a1 1 0 00-1-1H8zm1 10a2 2 0 100-4 2 2 0 000 4z"
-                      clip-rule="evenodd" />
-                  </svg>
-                </span>
-                <!-- dropdown content  -->
-                <ul class="absolute bg-gray-600 rounded mt-2 py-2 hidden">
-                  <li class="pl-4 py-2">Profile</li>
-                  <li class="pl-4 py-2">Logout</li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+        {% endif %}
+
+        <!-- Main Content Area -->
+        <div class="col-md-9">
+          <!-- Your main content goes here -->
+          {% block content %}
+          {% endblock %}
         </div>
-      </nav>
-    {% include "components/navbar.html" %}
-    <div class="w-3/4 bg-gray-400">
-      {% block content %}
-      {% endblock %}
+      </div>
     </div>
-    {% include "react/js.html" %}
-  </div>
+
+
+{% include "react/js.html" %}
   </body>
-</html>
+</html>
diff --git a/squib/templates/components/navbar.html b/squib/templates/components/navbar.html
@@ -1,32 +1,39 @@
-<nav class="w-1/4 bg-gray-800 text-white">
-  <!-- Logo  -->
-  <div class="p-4 cursor-pointer">
-    <a class="text-xl font-bold" href="#">Squib</a>
+<style>
+  a:hover{
+    background-color: gray;
+  }
+</style>
+  <div class=" bg-secondary d-flex flex-column px-8 h-100 w-25 top-0 " style="position: fixed; left: 0;">
+    <h1 class="fw-medium border-top d-flex align-items-center fs-5 px-4 py-8 mt-4 text-white">Squib</h1>
+    <nav class="overflow-auto pt-4 d-flex justify-content-between flex-column h-75">
+      <ul class="list-unstyled">
+        <li class="m-4 icon-link-hover">
+          <a href="/" class="text-white d-flex align-content-center justify-content-center overflow-hidden p-2 gap-4 rounded">
+            Home
+          </a>
+        </li>
+        <li class="m-4">
+          <a class="text-white d-flex align-content-center justify-content-center overflow-hidden p-2 gap-4 rounded" href="{% url 'profile' user.username %}" class="active">
+            Profile
+          </a>
+        </li>
+
+        <li class="m-4">
+          <a class="text-white d-flex align-content-center justify-content-center overflow-hidden p-2 gap-4 rounded" href="{% url 'edit' %}" class="active">
+            Edit
+          </a>
+        </li>
+      </ul>
+      <!-- drop down  -->
+
+        <ul class="m-4">
+          <li><a class="text-white d-flex align-content-center justify-content-center overflow-hidden p-2 rounded" href="{% url 'logout' %}">Logout</a></li>
+
+        </ul>
+
+    </nav>
   </div>
-  <!-- Navigation items  -->
-  <div>
-    <ul class="py-4 ">
-      <li class="pl-4 py-2">
-        <a class="" aria-current="page" href="#">Home</a>
-      </li>
-      <li class="pl-4 py-2">
-        <!-- Setting -->
-        <div class="relative">
-          <span class="flex items-center cursor-pointer">
-            Settings
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd"
-                d="M8 1a1 1 0 00-.707.293l-3 3a1 1 0 000 1.414l8 8a1 1 0 001.414 0l3-3A1 1 0 0017 9V3a1 1 0 00-1-1H8zm1 10a2 2 0 100-4 2 2 0 000 4z"
-                clip-rule="evenodd" />
-            </svg>
-          </span>
-          <!-- dropdown content  -->
-          <ul class="absolute bg-gray-600 rounded mt-2 py-2 hidden">
-            <li class="pl-4 py-2">Profile</li>
-            <li class="pl-4 py-2">Logout</li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-  </div>
-</nav>
+
+  <!-- Add Bootstrap JS (Popper.js is no longer required) -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+
diff --git a/squib/templates/profiles/update.html b/squib/templates/profiles/update.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block title %}{{ title }}{% endblock %}
-
+{% load crispy_forms_tags %}
 {% block content %}
 <div class="col-10 mx-auto">
     <h1> {{ title }} </h1>
@@ -10,7 +10,7 @@ <h1> {{ title }} </h1>
     {% endif %}
     <form action="" method="post">
         {% csrf_token %}
-        {{form.as_p}}
+        {{form|crispy}}
         <button type="submit" class="btn btn-outline-success">{{ btn_label }}</button>
     </form>
 </div>