Made the navbar responsive down to 350px

Author: JoseBambora

lib/karaokium/events.ex

@@ -164,7 +164,7 @@ defmodule Karaokium.Events do
     karaoke
     |> Karaoke.reset_pin_changeset()
     |> Repo.update()
-    |> broadcast(:update)
+    |> broadcast(:updated)
   end
 
   @doc """

lib/karaokium_web/live/admin/performance_live/show.ex

@@ -17,7 +17,7 @@ defmodule KaraokiumWeb.Admin.PerformanceLive.Show do
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(:karaoke_id, karaoke_id)
      |> assign(:id, id)
-     |> assign(:performancelive, Events.get_karaoke!(karaoke_id).performing_id)
+     |> assign(:karaoke_performance_id, Events.get_karaoke!(karaoke_id).performing_id)
      |> reload()}
   end
 

lib/karaokium_web/live/admin/performance_live/show.html.heex

@@ -45,8 +45,7 @@
 </div>
 
 <div class="text-center">
-  <%= if @performance.id == @performancelive do %>
-  <% else %>
+  <%= unless @performance.id == @karaoke_performance_id do %>
     <span>
       <%= live_patch("Edit",
         to: Routes.admin_performance_edit_path(@socket, :edit, @karaoke_id, @performance.id),

lib/karaokium_web/templates/layout/_header.html.heex

@@ -4,24 +4,51 @@
       <img
         alt="Phoenix Framework Logo"
         src={Routes.static_path(@conn, "/karaokium/images/logos/cesium-DARK.svg")}
-        height="50"
+        height="45"
         style="margin: 0;"
       />
     <% end %>
-    <ul>
-      <%= for entry <- menu(@conn) do %>
-        <li>
-          <a href={entry.url}><%= entry.title %></a>
-          <%= unless Enum.empty?(entry.submenu) do %>
-            <ul>
-              <%= for subentry <- entry.submenu do %>
-                <li><a href={subentry.url}><%= subentry.title %></a></li>
+    <div>
+      <div id="goToDiv">
+        <button style="min-width: 50px; padding: 5px 10px;" onclick="clickedbutton();">
+          Go To
+        </button>
+      </div>
+      <div id="menu" class="hidden block">
+        <ul>
+          <%= for entry <- menu(@conn) do %>
+            <li>
+              <button style="min-width: 50px; padding: 5px 10px;" onclick="clickedbutton();">
+                Go To
+              </button>
+              <%= unless Enum.empty?(entry.submenu) do %>
+                <ul class="block">
+                  <%= for subentry <- entry.submenu do %>
+                    <li>
+                      <a href={subentry.url}><%= subentry.title %></a>
+                    </li>
+                  <% end %>
+                </ul>
               <% end %>
-            </ul>
+            </li>
           <% end %>
-        </li>
-      <% end %>
-    </ul>
+        </ul>
+      </div>
+      <script>
+        var isClicked = false
+        function clickedbutton() {
+            isClicked = !isClicked
+            if(isClicked){
+              document.getElementById("goToDiv").className = "hidden"
+              document.getElementById("menu").className = ""
+            }
+            else{
+              document.getElementById("goToDiv").className = ""
+              document.getElementById("menu").className = "hidden"
+            }
+        }
+      </script>
+    </div>
     <%= render("_user_menu.html", assigns) %>
   </nav>
 </header>

lib/karaokium_web/views/layout_view.ex

@@ -7,13 +7,13 @@ defmodule KaraokiumWeb.LayoutView do
 
   def menu(conn) when is_logged_in(conn) do
     base_menu(conn) ++
-      Enum.reduce(Enum.sort(conn.assigns.current_user.permissions), [], fn role, acc ->
+      Enum.reduce(Enum.sort(conn.assigns.current_user.permissions), [], fn role, _ ->
         case role do
           :admin ->
-            acc ++ admin_menu(conn)
+            admin_menu(conn)
 
           :sysadmin ->
-            acc ++ sysadmin_menu(conn)
+            sysadmin_menu(conn)
         end
       end)
   end
@@ -29,30 +29,37 @@ defmodule KaraokiumWeb.LayoutView do
   defp admin_menu(conn) do
     [
       %{
-        title: "Events",
+        title: "Options",
         url: "#",
         submenu: [
           %{title: "Karaokes", url: Routes.admin_karaoke_index_path(conn, :index)},
-          %{title: "Locations", url: Routes.admin_location_index_path(conn, :index)}
-        ]
-      },
-      %{title: "Teams", url: Routes.admin_team_index_path(conn, :index), submenu: []},
-      %{
-        title: "Repertoire",
-        url: "#",
-        submenu: [
+          %{title: "Locations", url: Routes.admin_location_index_path(conn, :index)},
           %{title: "Search Songs", url: Routes.admin_song_search_path(conn, :new)},
           %{title: "Songs", url: Routes.admin_song_index_path(conn, :index)},
           %{title: "Artists", url: Routes.admin_artist_index_path(conn, :index)},
-          %{title: "Albums", url: Routes.admin_album_index_path(conn, :index)}
+          %{title: "Albums", url: Routes.admin_album_index_path(conn, :index)},
+          %{title: "Teams", url: Routes.admin_team_index_path(conn, :index)}
         ]
       }
     ]
   end
 
   defp sysadmin_menu(conn) do
     [
-      %{title: "LiveDashboard", url: Routes.live_dashboard_path(conn, :home), submenu: []}
+      %{
+        title: "Options",
+        url: "#",
+        submenu: [
+          %{title: "Karaokes", url: Routes.admin_karaoke_index_path(conn, :index)},
+          %{title: "Locations", url: Routes.admin_location_index_path(conn, :index)},
+          %{title: "Search Songs", url: Routes.admin_song_search_path(conn, :new)},
+          %{title: "Songs", url: Routes.admin_song_index_path(conn, :index)},
+          %{title: "Artists", url: Routes.admin_artist_index_path(conn, :index)},
+          %{title: "Albums", url: Routes.admin_album_index_path(conn, :index)},
+          %{title: "Teams", url: Routes.admin_team_index_path(conn, :index)},
+          %{title: "LiveDashboard", url: Routes.live_dashboard_path(conn, :home), submenu: []}
+        ]
+      }
     ]
   end