Merge pull request #8 from chrismccord/feature/set_active_tab_in_navbar

Active tab highlighted in sidebar based on current URL
This commit is contained in:
Chris McCord 2021-11-22 09:23:40 -05:00 committed by GitHub
commit 6849e108d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 6 deletions

View file

@ -3,7 +3,13 @@ defmodule LiveBeatsWeb.Nav do
alias LiveBeats.MediaLibrary
def on_mount(:default, _params, _session, socket) do
{:cont, assign(socket, :active_users, MediaLibrary.list_active_profiles(limit: 20))}
def on_mount(:default, params, _session, socket) do
active_tab =
case params do
%{"profile_username" => _profile} -> :index
_ -> :settings
end
{:cont, assign(socket, [active_users: MediaLibrary.list_active_profiles(limit: 20), active_tab: active_tab])}
end
end

View file

@ -28,7 +28,7 @@
<nav class="px-2">
<%= if @current_user do %>
<.sidebar_nav_links current_user={@current_user}/>
<.sidebar_nav_links current_user={@current_user} active_tab={@active_tab}/>
<% end %>
<.sidebar_active_users id="desktop-active-users" users={@active_users}/>
</nav>
@ -73,7 +73,7 @@
<!-- Navigation -->
<nav class="px-3 mt-6">
<%= if @current_user do %>
<.sidebar_nav_links current_user={@current_user}/>
<.sidebar_nav_links current_user={@current_user} active_tab={@active_tab}/>
<% end %>
<!-- Secondary navigation -->
<.sidebar_active_users id="mobile-active-users" users={@active_users}/>

View file

@ -33,7 +33,7 @@ defmodule LiveBeatsWeb.LayoutView do
<%= if @current_user do %>
<.link
redirect_to={profile_path(@current_user)}
class="text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
class={"text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md #{if @active_tab == :index, do: "bg-gray-300"}"}
>
<.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
My Songs
@ -41,7 +41,7 @@ defmodule LiveBeatsWeb.LayoutView do
<.link
redirect_to={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}
class="text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
class={"text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md #{if @active_tab == :settings, do: "bg-gray-300"}"}
>
<.icon name={:adjustments} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
Settings