school_house/lib/school_house_web/templates/layout/_header.html.heex at 85e83d788698025b4f0e2a2f063cdecbcda3bb1c · elixirschool/school_house · 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
<div class="flex flex-row fixed md:relative h-full md:h-auto z-10 md:w-full">
  <nav id="nav" class="w-64 md:w-full relative bg-nav dark:bg-nav-dark md:border-b-4 border-brand-purple-800 text-primary dark:text-primary-dark shadow-md transition-margin duration-300 overflow-y-scroll md:overflow-y-visible -ml-64 md:ml-0">
    <div class="container mx-auto flex flex-col md:flex-row justify-between">
      <.link navigate={Routes.page_path(@conn, :index, current_locale())} class="flex title-font font-medium items-center text-heavy dark:text-heavy-dark mb-4 md:mb-0 mx-auto md:mx-2 mt-6 md:mt-0">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 md:w-7 md:h-7 lg:h-10 lg:w-10 p-2 text-white rounded-full bg-purple" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
        </svg>
        <span class="ml-3 text-2xl font-extrabold text-primary dark:text-primary-dark tracking-tight"><%= gettext("Elixir School")%></span>
      </.link>
      <div class="w-full md:w-auto mx-auto md:ml-auto md:mr-0 flex flex-col-reverse md:flex-row">
        <ul class="flex flex-col md:flex-row md:items-center">
          <li class="hover:bg-purple hover:text-white px-4 md:px-0">
            <.link navigate={Routes.page_path(@conn, :why, current_locale())} class="relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold">
              <%= gettext("Why Elixir?") %>
            </.link>
          </li>
          <li class="toggleable hover:bg-purple hover:text-white px-4 md:px-0">
            <%= render("_lesson_menu.html", conn: @conn) %>
          </li>
          <li class="hover:bg-purple hover:text-white px-4 md:px-0">
            <.link navigate={Routes.post_path(@conn, :index)} class="relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold">
              <%= gettext("Blog") %>
            </.link>
          </li>
          <li class="hover:bg-purple hover:text-white px-4 md:px-0">
            <.link navigate={Routes.page_path(@conn, :get_involved, current_locale())} class="relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold">
              <%= gettext("Get Involved") %>
            </.link>
          </li>
        </ul>
        <ul class="flex flex-row items-center justify-center py-4 md:py-0">
          <li class="inline-flex items-center md:justify-center px-4 md:px-2">
            <%= render("_dark_mode_toggle.html", conn: @conn) %>
          </li>
          <li class="inline-flex items-center md:justify-center px-4 md:ml-2">
            <%= render("_locale_menu.html", conn: @conn) %>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="menu-toggle-button" class="md:hidden w-8 h-8 mt-4 ml-4 text-primary dark:text-primary-dark cursor-pointer">
    <svg fill="currentColor" class="px-2 py-1 bg-nav dark:bg-nav-dark shadow-md rounded-md" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
  </div>
</div>