hotseat.io/app/views/layouts/_navbar.html.erb at 2bc9a2af1022908612c92f7dd0b69178d9acf820 · hotseatio/hotseat.io · 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
<nav class="header-nav bg-white dark:bg-gray-900 dark:text-gray-200 shadow mb-4">
  <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <!-- Header -->
      <%= link_to "/", class: "block flex px-2 lg:px-0 items-center focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500" do %>
        <%= render "icons/hotseatlogored", classes: "h-8" %>
      <% end %>

      <% unless current_page?(root_path) %>
        <!-- Search -->
        <div class="flex-1 flex items-center justify-center px-2 lg:ml-6">
          <%= react_component_transparent("Search",
                                          props: {
                                            isShrinkable: true,
                                            id: "navbar_search",
                                            searchUrl: search_url,
                                            suggestionUrl: search_suggestions_url,
                                            initialValue: @query || "",
                                            magnifyingGlass: true,
                                            placeholder: "Search for classes, instructors, etc...",
                                          },
                                          html_options: {
                                            class: "w-full",
                                          }) %>
        </div>
      <% end %>

      <div class="flex items-center lg:hidden">
        <details>
          <!-- Mobile menu button -->
          <summary class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-400 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500">
            <%= render "icons/menu", classes: "h-6 w-6" %>
          </summary>

          <div class="origin-top-right absolute right-0 bg-white dark:bg-gray-900 w-full h-full z-10">
            <div class="pt-2 pb-3 space-y-1">
              <%= link_to "Write a review", new_review_path, class: "block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-100 hover:border-gray-300 dark:text-gray-300 dark:hover:text-gray-100 dark:hover:bg-gray-800 dark:hover:border-gray-600" %>
            </div>
            <div class="py-3 space-y-1 border-t border-gray-200 dark:border-gray-700">
              <div class="space-y-1">
                <% if user_signed_in? %>
                  <%= link_to "My Courses", my_courses_path, class: "mobile-dropdown-link" %>
                  <%= link_to "Settings", settings_path, class: "mobile-dropdown-link" %>
                  <%= link_to "Log out", destroy_user_session_path, data: { turbo_method: :delete }, class: "mobile-dropdown-link" %>
                <% else %>
                  <%= button_to "Log in / Sign Up", user_google_oauth2_omniauth_authorize_path, data: { turbo: false }, class: "mobile-dropdown-link" %>
                <% end %>
              </div>
            </div>
          </div>
      </div>

      <div class="hidden lg:ml-4 lg:flex lg:items-stretch lg:space-x-4">
        <% if user_signed_in? %>
          <div class="flex items-center">
            <%= link_to "Write a Review", new_review_path, class: "button-primary" %>
          </div>
          <%= link_to "My Courses", my_courses_path, class: "desktop-link #{cp(my_courses_path)}" %>
          <%= link_to "Settings", settings_path, class: "desktop-link #{cp(settings_path)}" %>
          <%= link_to "Log out", destroy_user_session_path, data: { turbo_method: :delete }, class: "desktop-link" %>
        <% else %>
          <%= button_to "Log in / Sign Up", user_google_oauth2_omniauth_authorize_path, data: { turbo: false }, class: "button-primary" %>
        <% end %>
      </div>
    </div>
  </div>
</nav>