From d0426e208e46f4f468189f1dcc71ab6228f8237f Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Sun, 6 Apr 2025 21:33:04 +0300
Subject: [PATCH] Update the navbar to show user information, sign in and out
 buttons.

---
 .../components/my_partials/navbar.ex          | 43 +++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/lib/decentralised_book_index_web/components/my_partials/navbar.ex b/lib/decentralised_book_index_web/components/my_partials/navbar.ex
index a4b095d..1187349 100644
--- a/lib/decentralised_book_index_web/components/my_partials/navbar.ex
+++ b/lib/decentralised_book_index_web/components/my_partials/navbar.ex
@@ -1,6 +1,8 @@
 defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
   use Phoenix.Component
   use DecentralisedBookIndexWeb, :verified_routes
+
+  import DecentralisedBookIndexWeb.Components.MyComponents.Buttons
   alias Phoenix.LiveView.JS
 
   attr :page_title, :string, required: true
@@ -17,14 +19,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
 
                 <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DBI</span>
             </a>
-            <div class="flex items-center lg:order-2">
-                <a href={~p"/sign-in"} class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Sign in</a>
-                <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
-                    <span class="sr-only">Open main menu</span>
-                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
-                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                </button>
-            </div>
+            <.user_info current_user={@current_user} />
             <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
                 <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
                     <li>
@@ -48,6 +43,38 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
     """
   end
 
+  attr :current_user, :map, default: nil
+
+  defp user_info(assigns) do
+    ~H"""
+    <div class="flex items-center lg:order-2">
+        <%= if @current_user != nil do %>
+            <div class="flex justify-end px-4">
+                <button id="dropdownButton-user-info" data-dropdown-toggle="dropdown-user-info" class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
+                    <span class="sr-only">Open dropdown</span>
+                    {@current_user.email}
+                </button>
+                <!-- Dropdown menu -->
+                <div id="dropdown-user-info" class="z-10 hidden text-base list-none bg-white rounded-lg shadow-sm w-40 dark:bg-gray-700 flex flex-col items-center pt-2">
+                    <.link patch={~p"/sign-out"}>
+                        <.primary_button>
+                            Sign Out
+                        </.primary_button>
+                    </.link>
+                </div>
+            </div>
+        <% else %>
+            <a href={~p"/sign-in"} class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Sign in</a>
+            <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
+                <span class="sr-only">Open main menu</span>
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+                <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+            </button>
+        <% end %>
+    </div>
+    """
+  end
+
   defp selected_navbar_link_css(page_title, active_title) do
     if active_title =~ page_title do
       "block py-2 pr-4 pl-3 text-black dark:text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white"