local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 67 Pull requests 6 Projects 3 Releases Packages 1 Activity Actions

Add simple sidebar
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse source
This commit is contained in:
Rafael Epplée 2025-12-03 21:25:39 +01:00
parent 3d4020cf27
commit 2f6d5ff818
No known key found for this signature in database
GPG key ID: B4EFE6DC59FAE118
6 changed files with 162 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

80
lib/mv_web/components/layouts/sidebar.ex Normal file
View file

@ -0,0 +1,80 @@
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