From 0305c721ba04976e04979073a0ff1567bdc5154f Mon Sep 17 00:00:00 2001
From: Matjaz <matjaz85@gmail.com>
Date: Wed, 2 Mar 2022 21:11:43 +0100
Subject: [PATCH] delo na profilih

---
 public/stylesheets/style.css      | 16 +++++++++
 routes/user.js                    | 17 ++++++---
 views/index.ejs                   | 32 +++--------------
 views/login.ejs                   |  8 ++---
 views/me.ejs                      | 32 +++--------------
 views/partials/_messages.ejs      |  5 +--
 views/partials/_sidebar_menu.ejs  |  1 +
 views/partials/_toot.ejs          |  5 +--
 views/partials/_user_dropdown.ejs | 27 +++++++++++++++
 views/partials/_user_timeline.ejs |  9 +++--
 views/register.ejs                | 12 +++----
 views/settings.ejs                | 57 ++++++++++++-------------------
 views/user.ejs                    | 32 +++--------------
 13 files changed, 112 insertions(+), 141 deletions(-)
 create mode 100644 views/partials/_user_dropdown.ejs

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index e087c81..ef69f7d 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -582,6 +582,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 9rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
 .max-h-40 {
   max-height: 10rem;
 }
@@ -602,6 +610,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 100%;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
diff --git a/routes/user.js b/routes/user.js
index 01553a9..b8ca884 100644
--- a/routes/user.js
+++ b/routes/user.js
@@ -43,13 +43,22 @@ router.get('/settings', async function(req, res, next) {
 router.post('/settings', async function(req, res, next) {
   var sessionId = req.cookies.sessionid;
   var auth = await lib.getAuthUser(sessionId);
+  var newData = {};
+  if(req.body.bio != '') {
+    newData.bio = req.body.bio;
+  }
+  if(req.body.name != '') {
+    newData.name = req.body.name;
+  }
+  if(req.files) {
+    if(req.files.avatar.data) {
+      newData.avatar = req.files.avatar.data;
+    }
+  }
   if(auth) {
     console.log(req);
     console.log(req.files);
-    await auth.update({
-      'bio': req.body.bio,
-      'avatar': req.files.avatar.data,
-    });
+    await auth.update(newData);
     res.redirect('/user/settings');
   } else {
     res.redirect('/login');
diff --git a/views/index.ejs b/views/index.ejs
index 617252e..39cb995 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -32,38 +32,14 @@
         </form>
         <div class="flex items-center justify-between mt-5">
           <div class="flex items-center">
-            <img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md mr-2">
+            <img src="/user/avatar/<%- auth.id %>" alt="<%= auth.name %>" class="rounded-md mr-2">
             <div>
               <div class="w-full font-bold text-sm"><%= auth.name %></div>
               <div class="w-full text-sm text-gray-400"><%= auth.email %></div>
             </div>
           </div>
           <div>
-            <button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton" class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true" aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
-            
-            <!-- This is an example component -->
-            <div class="max-w-lg mx-auto">
-              <!-- Dropdown menu -->
-              <div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4" id="dropdown">
-                <ul class="py-1" aria-labelledby="dropdown">
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Dashboard</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
-                  </li>
-                </ul>
-              </div>            
-            </div>
-            <script src="/scripts/flowbite.js"></script>
-
-
+            <%- include('partials/_user_dropdown.ejs') %>
           </div>
         </div>
         <div class="my-5">
@@ -85,7 +61,7 @@
         class="lg:flex-1 lg:mx-3 max-w-xl min-w-md dark:bg-gray-600 dark:text-white  scrollbar-thin scrollbar-thumb-gray-900 scrollbar-track-gray-700 overflow-y-scroll">
         <div class="lg:h-screen">
           <div class="bg-gray-900 text-white p-4 flex justify-between w-full z-50"">
-              <div><i class=" fa fa-home mr-2"></i>Home</div>
+            <div><a href="/"><i class=" fa fa-home mr-2"></i>Home</a></div>
           <div><i class="fa fa-sliders"></i></div>
         </div>
         <div class="max-h-40 overflow-y-hidden align-bottom">
@@ -93,7 +69,7 @@
         </div>
         <div class="flex justify-between">
           <div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
-            <img src="/images/avatar_94.png" alt="<%= auth.name %>" class="rounded-md overflow-visible">
+            <img src="/user/avatar/<%= auth.id %>" alt="<%= auth.name %>" class="rounded-md overflow-visible w-24 h-24">
           </div>
           <div class="flex items-center pt-3 px-2 mx-2">
             <button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
diff --git a/views/login.ejs b/views/login.ejs
index 2c4154f..d7a727e 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -17,13 +17,13 @@
       <div class="mt-4">
         <div>
           <label class="block" for="email">Email<label>
-              <input name="email" type="text" placeholder="Email"
-                class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
+          <input name="email" type="text" placeholder="Email"
+            class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
         </div>
         <div class="mt-4">
           <label class="block">Password<label>
-              <input name="password" type="password" placeholder="Password"
-                class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
+            <input name="password" type="password" placeholder="Password"
+              class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
         </div>
         <div class="flex items-baseline justify-between">
           <button type="submit" class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900">Login</button>
diff --git a/views/me.ejs b/views/me.ejs
index 91be890..f5ed344 100644
--- a/views/me.ejs
+++ b/views/me.ejs
@@ -32,38 +32,14 @@
         </form>
         <div class="flex items-center justify-between mt-5">
           <div class="flex items-center">
-            <img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md mr-2">
+            <img src="/user/avatar/<%- auth.id %>" alt="<%= auth.name %>" class="rounded-md mr-2">
             <div>
               <div class="w-full font-bold text-sm"><%= auth.name %></div>
               <div class="w-full text-sm text-gray-400"><%= auth.email %></div>
             </div>
           </div>
           <div>
-            <button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton" class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true" aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
-            
-            <!-- This is an example component -->
-            <div class="max-w-lg mx-auto">
-              <!-- Dropdown menu -->
-              <div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4" id="dropdown">
-                <ul class="py-1" aria-labelledby="dropdown">
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Dashboard</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
-                  </li>
-                </ul>
-              </div>            
-            </div>
-            <script src="/scripts/flowbite.js"></script>
-
-
+            <%- include('partials/_user_dropdown.ejs') %>
           </div>
         </div>
         <div class="my-5">
@@ -85,7 +61,7 @@
         class="lg:flex-1 lg:mx-3 max-w-xl min-w-md dark:bg-gray-600 dark:text-white  scrollbar-thin scrollbar-thumb-gray-900 scrollbar-track-gray-700 overflow-y-scroll">
         <div class="lg:h-screen">
           <div class="bg-gray-900 text-white p-4 flex justify-between w-full z-50"">
-              <div><i class=" fa fa-home mr-2"></i>Home</div>
+            <div><a href="/"><i class=" fa fa-home mr-2"></i>Home</a></div>
           <div><i class="fa fa-sliders"></i></div>
         </div>
         <div class="max-h-40 overflow-y-hidden align-bottom">
@@ -93,7 +69,7 @@
         </div>
         <div class="flex justify-between">
           <div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
-            <img src="/images/avatar_94.png" alt="<%= auth.name %>" class="rounded-md overflow-visible">
+            <img src="/user/avatar/<%= auth.id %>" alt="<%= auth.name %>" class="rounded-md overflow-visible w-24 h-24">
           </div>
           <div class="flex items-center pt-3 px-2 mx-2">
             <button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
diff --git a/views/partials/_messages.ejs b/views/partials/_messages.ejs
index 862bc2d..4866cd1 100644
--- a/views/partials/_messages.ejs
+++ b/views/partials/_messages.ejs
@@ -1,13 +1,14 @@
+<!-- _messages.ejs -->
 <% for(var i = 0; i < messages.length; i++) {%>
 
   <div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
     <div class="mr-4 flex-shrink-0">
-      <img src="/user/avatar/<%- messages[i].User.id %>" alt="<%= auth.name %>" class="rounded-md">
+      <img src="/user/avatar/<%- messages[i].User.id %>" alt="<%= auth.name %>" class="rounded-md w-12 h-12">
     </div>
     <div>
       <div>
         <h5 class="font-bold mb-4">
-          <%= messages[i].User.name %>
+          <a href="/user/profile/<%= messages[i].User.name %>"><%= messages[i].User.name %></a>
         </h5>
 
         <p>
diff --git a/views/partials/_sidebar_menu.ejs b/views/partials/_sidebar_menu.ejs
index 97528d8..fd8afdb 100644
--- a/views/partials/_sidebar_menu.ejs
+++ b/views/partials/_sidebar_menu.ejs
@@ -1,3 +1,4 @@
+<!-- _sidebar_menu.ejs -->
 <div class="lg:w-72 lg:overflow-y-hidden">
   <ul class="p-5">
     <li>
diff --git a/views/partials/_toot.ejs b/views/partials/_toot.ejs
index b17fb1f..413991d 100644
--- a/views/partials/_toot.ejs
+++ b/views/partials/_toot.ejs
@@ -1,13 +1,14 @@
+<!-- _toot.ejs -->
 <% for(var i = 0; i < messages.length; i++) {%>
 
   <div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
     <div class="mr-4 flex-shrink-0">
-      <img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md">
+      <img src="/user/avatar/<%- auth.id %>" alt="<%= auth.name %>" class="rounded-md w-12 h-12">
     </div>
     <div>
       <div>
         <h5 class="font-bold mb-4">
-          <%= auth.name %>
+          <a href="/user/profile/<%= auth.name %>"><%= auth.name %></a>
         </h5>
 
         <p>
diff --git a/views/partials/_user_dropdown.ejs b/views/partials/_user_dropdown.ejs
new file mode 100644
index 0000000..7f30556
--- /dev/null
+++ b/views/partials/_user_dropdown.ejs
@@ -0,0 +1,27 @@
+<!-- _user_dropdown.ejs -->
+<button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton"
+  class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true"
+  aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
+
+<!-- This is an example component -->
+<div class="max-w-lg mx-auto">
+  <!-- Dropdown menu -->
+  <div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4"
+    id="dropdown">
+    <ul class="py-1" aria-labelledby="dropdown">
+      <li>
+        <a href="/me" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Profile</a>
+      </li>
+      <li>
+        <a href="/user/settings" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
+      </li>
+      <li>
+        <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
+      </li>
+      <li>
+        <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
+      </li>
+    </ul>
+  </div>
+</div>
+<script src="/scripts/flowbite.js"></script>
\ No newline at end of file
diff --git a/views/partials/_user_timeline.ejs b/views/partials/_user_timeline.ejs
index d5f21af..b11b296 100644
--- a/views/partials/_user_timeline.ejs
+++ b/views/partials/_user_timeline.ejs
@@ -1,17 +1,20 @@
+<!-- _user_timeline.ejs -->
 <% for(var i = 0; i < messages.length; i++) {%>
 
   <div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
     <div class="mr-4 flex-shrink-0">
-      <img src="/user/avatar/<%- user.id %>" alt="<%= user.name %>" class="rounded-md">
+      <img src="/user/avatar/<%- user.id %>" alt="<%= user.name %>" class="rounded-md w-12 h-12">
     </div>
     <div>
       <div>
         <h5 class="font-bold mb-4">
-          <%= user.name %>
+          <a href="/user/profile/<%= user.name %>"><%= user.name %></a>
         </h5>
 
         <p>
-          <%= messages[i].body%>
+          <% messages[i].body.split('\n').forEach(line => { %>
+            <%= line %><br>
+          <% }) %>
         </p>
       </div>
       <div class="text-xs text-gray-500 mt-3">Posted on: <%= messages[i].createdAt %>
diff --git a/views/register.ejs b/views/register.ejs
index 31f2612..9c9e8d5 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -17,18 +17,18 @@
       <div class="mt-4">
         <div>
           <label class="block" for="username">Name<label>
-              <input name="username" type="text" placeholder="Name"
-                class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
+          <input name="username" type="text" placeholder="Name"
+            class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
         </div>
         <div class="mt-4">
           <label class="block" for="email">Email<label>
-              <input name="email" type="text" placeholder="Email"
-                class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
+          <input name="email" type="text" placeholder="Email"
+            class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
         </div>
         <div class="mt-4">
           <label class="block">Password<label>
-              <input name="password" type="password" placeholder="Password"
-                class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
+          <input name="password" type="password" placeholder="Password"
+            class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
         </div>
         <div class="flex items-baseline justify-between">
           <button type="submit" class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900">Register</button>
diff --git a/views/settings.ejs b/views/settings.ejs
index bff1881..4b4f8d8 100644
--- a/views/settings.ejs
+++ b/views/settings.ejs
@@ -32,38 +32,14 @@
         </form>
         <div class="flex items-center justify-between mt-5">
           <div class="flex items-center">
-            <img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md mr-2">
+            <img src="/user/avatar/<%- auth.id %>" alt="<%= auth.name %>" class="rounded-md mr-2">
             <div>
               <div class="w-full font-bold text-sm"><%= auth.name %></div>
               <div class="w-full text-sm text-gray-400"><%= auth.email %></div>
             </div>
           </div>
           <div>
-            <button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton" class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true" aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
-            
-            <!-- This is an example component -->
-            <div class="max-w-lg mx-auto">
-              <!-- Dropdown menu -->
-              <div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4" id="dropdown">
-                <ul class="py-1" aria-labelledby="dropdown">
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Dashboard</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
-                  </li>
-                </ul>
-              </div>            
-            </div>
-            <script src="/scripts/flowbite.js"></script>
-
-
+            <%- include('partials/_user_dropdown.ejs') %>
           </div>
         </div>
         <div class="my-5">
@@ -85,7 +61,7 @@
         class="lg:flex-1 lg:mx-3 max-w-xl min-w-md dark:bg-gray-600 dark:text-white  scrollbar-thin scrollbar-thumb-gray-900 scrollbar-track-gray-700 overflow-y-scroll">
         <div class="lg:h-screen">
           <div class="bg-gray-900 text-white p-4 flex justify-between w-full z-50"">
-              <div><i class=" fa fa-home mr-2"></i>Home</div>
+            <div><a href="/"><i class=" fa fa-home mr-2"></i>Home</a></div>
           <div><i class="fa fa-sliders"></i></div>
         </div>
         <div class="max-h-40 overflow-y-hidden align-bottom">
@@ -93,7 +69,7 @@
         </div>
         <div class="flex justify-between">
           <div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
-            <img src="/images/avatar_94.png" alt="<%= auth.name %>" class="rounded-md overflow-visible">
+            <img src="/user/avatar/<%= auth.id %>" alt="<%= auth.name %>" class="rounded-md overflow-visible w-24 h-24">
           </div>
           <div class="flex items-center pt-3 px-2 mx-2">
             <button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
@@ -121,14 +97,23 @@
         <!-- dodaj -->
         <div class="p-4">
           <form action="/user/settings" method="POST"  enctype="multipart/form-data">
-            <input type="file" name="avatar" id="">
-            <br><br>
-            <textarea
-              class="w-full h-36 p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900 text-sm"
-              name="bio" id="body" cols="20" placeholder="A little bit about me"><%= auth.bio%></textarea>
-            <button
-              class="place-content-end bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline font-bold"
-              type="submit">Save</button>
+            <div class="my-4 w-full">
+              <label for="name">Name:</label>
+              <input value="<%= auth.name %>" class="dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900 text-sm" type="text" name="name" id="name">
+            </div>
+            <div class="my-4">
+              <input type="file" name="avatar" id="avatar" >
+            </div>
+            <div class="my-4">
+              <textarea
+                class="w-full h-36 p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900 text-sm"
+                name="bio" id="body" cols="20" placeholder="A little bit about me"><%= auth.bio%></textarea>
+            </div>
+            <div class="my-4">
+              <button
+                class="place-content-end bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline font-bold"
+                type="submit">Save</button>
+            </div>
           </form>
         </div>
         
diff --git a/views/user.ejs b/views/user.ejs
index 2b3ea6a..8c8632f 100644
--- a/views/user.ejs
+++ b/views/user.ejs
@@ -32,38 +32,14 @@
         </form>
         <div class="flex items-center justify-between mt-5">
           <div class="flex items-center">
-            <img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md mr-2">
+            <img src="/user/avatar/<%- auth.id %>" alt="<%= auth.name %>" class="rounded-md mr-2">
             <div>
               <div class="w-full font-bold text-sm"><%= auth.name %></div>
               <div class="w-full text-sm text-gray-400"><%= auth.email %></div>
             </div>
           </div>
           <div>
-            <button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton" class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true" aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
-            
-            <!-- This is an example component -->
-            <div class="max-w-lg mx-auto">
-              <!-- Dropdown menu -->
-              <div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4" id="dropdown">
-                <ul class="py-1" aria-labelledby="dropdown">
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Dashboard</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
-                  </li>
-                  <li>
-                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
-                  </li>
-                </ul>
-              </div>            
-            </div>
-            <script src="/scripts/flowbite.js"></script>
-
-
+            <%- include('partials/_user_dropdown.ejs') %>
           </div>
         </div>
         <div class="my-5">
@@ -85,7 +61,7 @@
         class="lg:flex-1 lg:mx-3 max-w-xl min-w-md dark:bg-gray-600 dark:text-white  scrollbar-thin scrollbar-thumb-gray-900 scrollbar-track-gray-700 overflow-y-scroll">
         <div class="lg:h-screen">
           <div class="bg-gray-900 text-white p-4 flex justify-between w-full z-50"">
-              <div><i class=" fa fa-home mr-2"></i>Home</div>
+              <div><a href="/"><i class=" fa fa-home mr-2"></i>Home</a></div>
           <div><i class="fa fa-sliders"></i></div>
         </div>
         <div class="max-h-40 overflow-y-hidden align-bottom">
@@ -93,7 +69,7 @@
         </div>
         <div class="flex justify-between">
           <div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
-            <img src="/images/avatar_94.png" alt="<%= user.name %>" class="rounded-md overflow-visible">
+            <img src="/user/avatar/<%= user.id %>" alt="<%= user.name %>" class="rounded-md overflow-visible w-24 h-24">
           </div>
           <div class="flex items-center pt-3 px-2 mx-2">
               <a class="bg-blue-600