Top navigation panel

The top navigation bar is divided into three sections: left, center, and right.

Each section functions as a slot that can accept various components.

Left section: Reserved for a sidebar call button and a logo. The call button is fixed in the code, while other components like the logo can be added through the slot.
Center section: Intended for a search form. A "Hatching" component can be used to highlight this area until other content is added.
Right section: Allocated for auxiliary buttons and a user profile call button, all inserted into the slot.

<.header_top>
  <:left_slot>
    ...Logo
    <.logotype icon="logo.svg" class="min-w-[65px] h-[26px]" />
  </:left_slot>

  <:central_slot>
    <MoonBackofficeWeb.Hatching.hatching
      class="hidden lg:flex w-full h-full justify-center items-center rounded-lg border border-dashed border-gray-400 text-gray-900/10"
      patternId="pattern-1526ac66-f54a-4681-8fb8-0859d412f252"
    />
  </:central_slot>

  <:right_slot>
    ...User profile
  </:right_slot>
</.header_top>

<header
  class="topbar col-span-2 flex items-center gap-x-2 lg:justify-stretch lg:p-1"
>
  <nav class="flex items-center gap-4 px-4">
    <.burger_button id="burger_button" click="call_burger_menu" icon="menu"
    class="lg:hidden rounded-md" />
    <img src="/images/logo.svg" class="h-[26px] w-[65px]" />
  </nav>
  ... you content here
</header>

Burger button

use MoonLive

attr :id, :string, required: true
attr :click, :string, default: nil
attr :icon, :string, default: ""
attr :class, :string, default: ""

def burger_button(assigns) do
  ~H"""
  <.button id={@id} phx-click={@click} icon variant="outline" class={@class}>
    <.icon name={@icon} class="" />
  </.button>
  """
end

User profile

The user profile menu is implemented using three components: user_profile_control, user_profile_button, and profile_menu.

<div class="flex h-full w-full items-center justify-end gap-x-2 px-2 lg:w-auto">
  <.icon_button id="alarm_button" click={} icon="notification"
  class="!rounded-full w-8 h-8 bg-transparent !text-bulma" />
  <.user_profile_control avatar={ %{ view: "gift", type: "icon", class:
  "!rounded-full w-8 h-8 min-w-8 min-h-8 !bg-krillin text-amber-50" } }
  name={@profile_username} role={@profile_operator} hint="unfold-more"
  items={@profile_menu_items} />
</div>

User profile control

The user_profile_control function, part of the Controls module, acts as a wrapper for user_profile_button and profile_menu, organizing and configuring these profile components.

Configuration Parameters for user_profile_control:

:avatar, :map, default: %{view: "U", type: "text", class: "!rounded-full w-8 h-8"}. This sets the appearance of the profile call button. Default shows a text "U" in the center; class can be modified for different styles.
To display an icon instead of text, set type: "icon" and specify the icon name in view.
The :avatar settings are shared with user_profile_button and profile_menu.

Attributes used by profile_menu:

:name, :string, required: true - Specifies the user's name.
:role, :string, required: true - Indicates the user's role.
:hint, :string, default: "" - Provides additional information about the user.
:items, :list, default: [] - Lists the items in the profile menu.

The user_profile_button function, part of the Controls module, manages the rendering and functionality of the profile call button, which controls the visibility of a tray containing the profile menu.

This feature allows the tray to open on mouse hover and toggle on click. The tray, positioned relative to the button, is transparent and invisible by default, with zero height. It becomes visible when populated with content, specifically designed to be handled by the profile_menu component.

The profile_menu component is designed as a standalone module that can be used independently or in conjunction with the previously described components. Its function is to display a menu equipped with an avatar and textual data. The set of attributes for this component slightly differs from those of user_profile_control.

:avatar slot: Accepts either an icon component or text for display.
:avatar_class, :string, default: "" - Controls the display settings of the avatar.
:username, :string, required: true - Specifies the user's name.
:role, :string, default: "" and :hint, :string, default: "" - Provide additional textual information about the user.
:items, :list, default: [] - Defines the list of items in the profile menu.

Top navigation panel

Top header

Burger button

User profile

User profile control

User Profile Button

Profile Menu