From c0f91c52f1f1030787649cc68ceb0115ec3e4326 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Sun, 27 Apr 2025 21:10:44 +0300
Subject: [PATCH] Update the format for navbar and footer partials.

---
 .../components/my_partials/footer.ex          |   4 +-
 .../components/my_partials/navbar.ex          | 208 +++++++++++++-----
 2 files changed, 152 insertions(+), 60 deletions(-)

diff --git a/lib/decentralised_book_index_web/components/my_partials/footer.ex b/lib/decentralised_book_index_web/components/my_partials/footer.ex
index 8d353d7..040ae6f 100644
--- a/lib/decentralised_book_index_web/components/my_partials/footer.ex
+++ b/lib/decentralised_book_index_web/components/my_partials/footer.ex
@@ -6,7 +6,9 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Footer do
     <footer class="bg-white shadow-sm dark:bg-gray-900">
       <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
         <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-        <span class="block text-sm text-gray-500 text-center dark:text-gray-400">© 2025 Kostiantyn Klochko. All Rights Reserved.</span>
+        <span class="block text-sm text-gray-500 text-center dark:text-gray-400">
+          © 2025 Kostiantyn Klochko. All Rights Reserved.
+        </span>
       </div>
     </footer>
     """
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 0f808e6..3eea901 100644
--- a/lib/decentralised_book_index_web/components/my_partials/navbar.ex
+++ b/lib/decentralised_book_index_web/components/my_partials/navbar.ex
@@ -12,48 +12,125 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
   def partial_navbar(assigns) do
     ~H"""
     <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
-        <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
-            <a href={~p"/"} class="flex items-center">
-                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.03v13m0-13c-2.819-.831-4.715-1.076-8.029-1.023A.99.99 0 0 0 3 6v11c0 .563.466 1.014 1.03 1.007 3.122-.043 5.018.212 7.97 1.023m0-13c2.819-.831 4.715-1.076 8.029-1.023A.99.99 0 0 1 21 6v11c0 .563-.466 1.014-1.03 1.007-3.122-.043-5.018.212-7.97 1.023"/>
-                </svg>
+      <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
+        <a href={~p"/"} class="flex items-center">
+          <svg
+            class="w-6 h-6 text-gray-800 dark:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 6.03v13m0-13c-2.819-.831-4.715-1.076-8.029-1.023A.99.99 0 0 0 3 6v11c0 .563.466 1.014 1.03 1.007 3.122-.043 5.018.212 7.97 1.023m0-13c2.819-.831 4.715-1.076 8.029-1.023A.99.99 0 0 1 21 6v11c0 .563-.466 1.014-1.03 1.007-3.122-.043-5.018.212-7.97 1.023"
+            />
+          </svg>
 
-                <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DBI</span>
-            </a>
-            <div class="flex items-center lg:order-2">
-                <.user_info current_user={@current_user} />
-                <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>
-            <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>
-                        <a href={~p"/books/"} class={selected_navbar_link_css(@page_title, "Listing Books")} aria-current="page">Books</a>
-                    </li>
-                    <li>
-                        <a href={~p"/authors/"} class={selected_navbar_link_css(@page_title, "Listing Authors")} aria-current="page">Authors</a>
-                    </li>
-                    <%= if @current_user != nil and Role.can_moderate?(@current_user.role) do %>
-                        <li>
-                            <a href={~p"/publishers/"} class={selected_navbar_link_css(@page_title, "Listing Publishers")} aria-current="page">Publishers</a>
-                        </li>
-                    <% end %>
-                    <%= if @current_user != nil and Role.can_administrate?(@current_user.role) do %>
-                        <li>
-                            <a href={~p"/servers/"} class={selected_navbar_link_css(@page_title, "Listing Server")} aria-current="page">Servers</a>
-                        </li>
-                    <% end %>
-                    <%= if @current_user != nil and Role.can_administrate?(@current_user.role) do %>
-                        <li>
-                            <a href={~p"/users/"} class={selected_navbar_link_css(@page_title, "Listing Users")} aria-current="page">Users</a>
-                        </li>
-                    <% end %>
-                </ul>
-            </div>
+          <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DBI</span>
+        </a>
+        <div class="flex items-center lg:order-2">
+          <.user_info current_user={@current_user} />
+          <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>
+        <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>
+              <a
+                href={~p"/books/"}
+                class={selected_navbar_link_css(@page_title, "Listing Books")}
+                aria-current="page"
+              >
+                Books
+              </a>
+            </li>
+            <li>
+              <a
+                href={~p"/authors/"}
+                class={selected_navbar_link_css(@page_title, "Listing Authors")}
+                aria-current="page"
+              >
+                Authors
+              </a>
+            </li>
+            <%= if @current_user != nil and Role.can_moderate?(@current_user.role) do %>
+              <li>
+                <a
+                  href={~p"/publishers/"}
+                  class={selected_navbar_link_css(@page_title, "Listing Publishers")}
+                  aria-current="page"
+                >
+                  Publishers
+                </a>
+              </li>
+            <% end %>
+            <%= if @current_user != nil and Role.can_administrate?(@current_user.role) do %>
+              <li>
+                <a
+                  href={~p"/servers/"}
+                  class={selected_navbar_link_css(@page_title, "Listing Server")}
+                  aria-current="page"
+                >
+                  Servers
+                </a>
+              </li>
+            <% end %>
+            <%= if @current_user != nil and Role.can_administrate?(@current_user.role) do %>
+              <li>
+                <a
+                  href={~p"/users/"}
+                  class={selected_navbar_link_css(@page_title, "Listing Users")}
+                  aria-current="page"
+                >
+                  Users
+                </a>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
     </nav>
     """
   end
@@ -63,27 +140,40 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
   defp user_info(assigns) do
     ~H"""
     <%= 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 border dark:border-gray-600">
-                <%= if @current_user.role != :user do %>
-                    <p class="text-zinc-700 dark:text-white">
-                        role: {@current_user.role}
-                    </p>
-                <% end %>
-                <.link patch={~p"/sign-out"}>
-                    <.primary_button>
-                        Sign Out
-                    </.primary_button>
-                </.link>
-            </div>
+      <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 border dark:border-gray-600"
+        >
+          <%= if @current_user.role != :user do %>
+            <p class="text-zinc-700 dark:text-white">
+              role: {@current_user.role}
+            </p>
+          <% end %>
+          <.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>
+      <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>
     <% end %>
     """
   end