80 lines
2.8 KiB
Elixir
80 lines
2.8 KiB
Elixir
defmodule MvWeb.Layouts.Sidebar do
|
|
@moduledoc """
|
|
Sidebar navigation component used in the drawer layout
|
|
"""
|
|
use MvWeb, :html
|
|
|
|
attr :current_user, :map, default: nil, doc: "The current user"
|
|
attr :club_name, :string, required: true, doc: "The name of the club"
|
|
|
|
def sidebar(assigns) do
|
|
~H"""
|
|
<div class="drawer-side is-drawer-close:overflow-visible">
|
|
<label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
|
<div class="flex flex-col items-start min-h-full bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64">
|
|
<ul class="w-64 menu">
|
|
<li>
|
|
<h1 class="mb-2 text-lg font-bold menu-title is-drawer-close:hidden">{@club_name}</h1>
|
|
</li>
|
|
<%= if @current_user do %>
|
|
<li>
|
|
<.link
|
|
navigate="/members"
|
|
class={[
|
|
"is-drawer-close:tooltip is-drawer-close:tooltip-right"
|
|
]}
|
|
data-tip={gettext("Members")}
|
|
>
|
|
<.icon name="hero-users" class="size-5" />
|
|
<span class="is-drawer-close:hidden">{gettext("Members")}</span>
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate="/users"
|
|
class={[
|
|
"is-drawer-close:tooltip is-drawer-close:tooltip-right"
|
|
]}
|
|
data-tip={gettext("Users")}
|
|
>
|
|
<.icon name="hero-user-circle" class="size-5" />
|
|
<span class="is-drawer-close:hidden">{gettext("Users")}</span>
|
|
</.link>
|
|
</li>
|
|
<li class="is-drawer-close:hidden">
|
|
<h2 class="flex items-center gap-2 menu-title">
|
|
<.icon name="hero-currency-dollar" class="size-5" />
|
|
{gettext("Contributions")}
|
|
</h2>
|
|
<ul>
|
|
<li class="is-drawer-close:hidden">
|
|
<.link navigate="/contribution_types">
|
|
{gettext("Plans")}
|
|
</.link>
|
|
</li>
|
|
<li class="is-drawer-close:hidden">
|
|
<.link navigate="/contribution_settings">
|
|
{gettext("Settings")}
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate="/settings"
|
|
class={[
|
|
"is-drawer-close:tooltip is-drawer-close:tooltip-right"
|
|
]}
|
|
data-tip={gettext("Settings")}
|
|
>
|
|
<.icon name="hero-cog-6-tooth" class="size-5" />
|
|
<span class="is-drawer-close:hidden">{gettext("Settings")}</span>
|
|
</.link>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|