KKlochko
/
decentralised_book_index
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the format for navbar and footer partials.

Browse Source
dev
KKlochko 2 months ago
parent 6baac297c5
commit c0f91c52f1
2 changed files with 152 additions and 60 deletions
Show Stats Download Patch File Download Diff File

4
lib/decentralised_book_index_web/components/my_partials/footer.ex
Unescape View File

@ -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>
"""

208
lib/decentralised_book_index_web/components/my_partials/navbar.ex
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save