yearbook/lib/yearbook_web/components/navbar.ex at 4cacc74d7085cd78a3066b183a89b8bb7324881b · cesium/yearbook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
defmodule YearbookWeb.Navbar do
  @moduledoc """
  Navbar component.
  """
  use YearbookWeb, :html
  alias Phoenix.LiveView.JS

  attr :current_scope, :any, default: nil

  def navbar(assigns) do
    ~H"""
    <div class="bg-white flex items-center justify-between w-full h-16 sm:h-20 px-3 sm:px-4 border-b-2 border-primary sticky top-0 z-40">
      <div class="flex z-10 justify-between h-full items-center">
        <div class="p-2 sm:p-3 rounded-2xl">
          <.link navigate={~p"/"} class="flex items-center gap-2 sm:gap-3 cursor-pointer">
            <span class="hero-academic-cap text-black h-7 w-7 sm:h-8 sm:w-8"></span>
            <span class="text-xl sm:text-2xl font-bold text-black uppercase">YEARBOOK</span>
          </.link>
        </div>
      </div>

      <div class="hidden lg:flex items-center gap-1 sm:gap-3">
        <.nav_content current_scope={@current_scope} />
      </div>

      <div class="lg:hidden flex items-center">
        <button type="button" phx-click={show_mobile_navbar()} id="show-mobile-navbar">
          <.icon name="hero-bars-3" class="size-8 text-black" />
        </button>
      </div>
    </div>

    <div
      id="mobile-navbar-container"
      class="fixed inset-0 z-50 lg:hidden"
      style="display: none;"
    >
      <div class="fixed inset-0 bg-black/20" phx-click={hide_mobile_navbar()}></div>

      <div
        id="mobile-navbar"
        class="relative bg-white border-b-2 border-primary w-full flex flex-col p-4 shadow-lg"
      >
        <div class="flex justify-end mb-4">
          <button type="button" phx-click={hide_mobile_navbar()}>
            <.icon name="hero-x-mark" class="size-8 text-black" />
          </button>
        </div>

        <div class="flex flex-col items-center gap-4 pb-4">
          <.nav_content current_scope={@current_scope} is_mobile={true} />
        </div>
      </div>
    </div>
    """
  end

  defp nav_content(assigns) do
    assigns = assign_new(assigns, :is_mobile, fn -> false end)

    ~H"""
    <%= if @current_scope && @current_scope.user do %>
      <%= if @current_scope.user.role == :admin do %>
        <.link
          navigate={~p"/backoffice/mock"}
          phx-click={@is_mobile && hide_mobile_navbar()}
          class="inline-flex items-center justify-center px-3 sm:w-32 h-9 sm:h-10 text-sm sm:text-base font-bold text-primary hover:opacity-80 transition cursor-pointer"
        >
          Backoffice
        </.link>
      <% end %>
      <.link
        navigate={~p"/users/settings"}
        phx-click={@is_mobile && hide_mobile_navbar()}
        class="inline-flex items-center justify-center px-3 sm:w-32 h-9 sm:h-10 text-sm sm:text-base font-semibold hover:text-primary transition cursor-pointer"
      >
        Settings
      </.link>
      <.link
        href={~p"/users/log-out"}
        method="delete"
        class="inline-flex items-center justify-center px-3 sm:w-32 h-9 sm:h-10 text-sm sm:text-base font-semibold hover:text-primary transition cursor-pointer"
      >
        Logout
      </.link>
    <% else %>
      <.link
        navigate={~p"/users/register"}
        phx-click={@is_mobile && hide_mobile_navbar()}
        class="inline-flex items-center justify-center px-3 sm:w-32 h-9 sm:h-10 text-sm sm:text-base font-semibold hover:text-primary transition cursor-pointer"
      >
        Sign Up
      </.link>
      <.link
        navigate={~p"/users/log-in"}
        phx-click={@is_mobile && hide_mobile_navbar()}
        class="inline-flex items-center justify-center px-3 sm:w-32 h-9 sm:h-10 text-sm sm:text-base font-semibold hover:text-primary transition cursor-pointer"
      >
        Sign In
      </.link>
    <% end %>
    """
  end

  def show_mobile_navbar(js \\ %JS{}) do
    js
    |> JS.add_class("overflow-hidden", to: "body")
    |> JS.show(to: "#mobile-navbar-container", transition: "fade-in")
    |> JS.show(
      to: "#mobile-navbar",
      display: "flex",
      time: 300,
      transition:
        {"transition ease-in-out duration-300 transform", "-translate-y-full", "translate-y-0"}
    )
  end

  def hide_mobile_navbar(js \\ %JS{}) do
    js
    |> JS.remove_class("overflow-hidden", to: "body")
    |> JS.hide(to: "#mobile-navbar-container", transition: "fade-out")
    |> JS.hide(
      to: "#mobile-navbar",
      time: 300,
      transition:
        {"transition ease-in-out duration-300 transform", "translate-y-0", "-translate-y-full"}
    )
  end
end