Update colors in navigation bar

This commit is contained in:
Claudio Ortolina
2024-10-23 10:28:37 +01:00
parent 79edd6eade
commit c45ba43c46
3 changed files with 18 additions and 14 deletions
+12 -5
View File
@@ -12,12 +12,19 @@ defmodule MusicLibraryWeb.Layouts do
embed_templates "layouts/*"
@base_classes "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
def nav_link_class(current_section, section) when current_section == section do
[@base_classes, "border-zinc-500 text-gray-900"]
@nav_base_classes "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
@nav_inactive_classes "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
@nav_active_classes "border-zinc-500 text-gray-900 dark:text-gray-100"
def section_link_classes(current_section, section) when current_section == section do
[@nav_base_classes, @nav_active_classes]
end
def nav_link_class(_current_section, _section) do
[@base_classes, "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"]
def section_link_classes(_current_section, _section) do
[@nav_base_classes, @nav_inactive_classes]
end
def nav_link_classes do
[@nav_base_classes, @nav_inactive_classes]
end
end
@@ -1,24 +1,21 @@
<nav class="bg-white shadow">
<nav class="bg-white dark:bg-zinc-800 shadow">
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between">
<div class="flex">
<div class="flex space-x-8">
<a href="/" class={nav_link_class(assigns[:nav_section], :stats)}>
<a href="/" class={section_link_classes(assigns[:nav_section], :stats)}>
<%= gettext("Stats") %>
</a>
<a href={~p"/records"} class={nav_link_class(assigns[:nav_section], :records)}>
<a href={~p"/records"} class={section_link_classes(assigns[:nav_section], :records)}>
<%= gettext("Collection") %>
</a>
<a href={~p"/wishlist"} class={nav_link_class(assigns[:nav_section], :wishlist)}>
<a href={~p"/wishlist"} class={section_link_classes(assigns[:nav_section], :wishlist)}>
<%= gettext("Wishlist") %>
</a>
</div>
</div>
<div class="flex space-x-8">
<a
class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium border-transparent text-gray-500 hover:text-gray-700"
href={~p"/login"}
>
<a class={nav_link_classes()} } href={~p"/login"}>
<%= gettext("Logout") %>
</a>
</div>
@@ -13,7 +13,7 @@
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-white">
<body class="bg-white dark:bg-zinc-800">
<%= @inner_content %>
</body>
</html>