Made the navbar responsive down to 350px

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

@@ -1,27 +1,100 @@
 <header>
   <nav>
-    <%= live_patch to: Routes.page_path(@conn, :index) do %>
-      <img
-        alt="Phoenix Framework Logo"
-        src={Routes.static_path(@conn, "/karaokium/images/logos/cesium-DARK.svg")}
-        height="50"
-        style="margin: 0;"
-      />
+    <%= if @current_user do %>
+      <div>
+        <button class="text-center" style="padding: 1px 5px;" onclick="clickedbutton();">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+        <script>
+          var isClicked = false
+          function pixeis(){
+            var result = false
+            if(window.innerWidth < 700)
+              result = true
+            return result
+          }
+          function scene1()
+          {
+            document.getElementById("menu2").className = "text-center"
+            document.getElementById("content").className = "hidden"
+            document.getElementById("menu").className = "hidden"
+          }
+          function scene2()
+          {
+            document.getElementById("menu").className = "text-center"
+            document.getElementById("menu2").className = "hidden"
+            document.getElementById("content").className = "container"
+          }
+          function clickedbutton() {
+              isClicked = !isClicked
+              if(isClicked){
+                if(pixeis())
+                  scene1();
+                else
+                  scene2();
+              }
+              else{
+                document.getElementById("menu").className = "hidden"
+                document.getElementById("menu2").className = "hidden"
+                document.getElementById("content").className = "container"
+              }
+          }
+          function resized()
+          {
+            if(isClicked)
+              if(pixeis())
+                scene1()
+              else
+                scene2()
+          }
+          window.onresize = resized;
+        </script>
+      </div>
     <% 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>
-              <% end %>
-            </ul>
-          <% end %>
-        </li>
+    <div class="text-center">
+      <%= live_patch to: Routes.page_path(@conn, :index) do %>
+        <img
+          alt="Phoenix Framework Logo"
+          src={Routes.static_path(@conn, "/karaokium/images/logos/cesium-DARK.svg")}
+          height="45"
+          style="margin: 0;"
+        />
       <% end %>
-    </ul>
+    </div>
     <%= render("_user_menu.html", assigns) %>
   </nav>
 </header>
+
+<div id="menu" class="hidden">
+  <%= for entry <- menu(@conn) do %>
+    <%= unless Enum.empty?(entry.submenu) do %>
+      |
+      <%= for subentry <- entry.submenu do %>
+        <a href={subentry.url}><%= subentry.title %></a> |
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+
+<div id="menu2" class="hidden">
+  <%= for entry <- menu(@conn) do %>
+    <%= unless Enum.empty?(entry.submenu) do %>
+      <ul class="px-0">
+      <%= for subentry <- entry.submenu do %>
+        <li class="list-none">
+          <a href={subentry.url}><%= subentry.title %></a>
+        </li>
+      <% end %>
+      </ul>
+    <% end %>
+  <% end %>
+</div>

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

@@ -1,4 +1,4 @@
-<main class="container">
+<main class="container" id="content">
   <%= if get_flash(@conn, :info) do %>
     <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
   <% end %>

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

@@ -1,4 +1,4 @@
-<main class="container">
+<main class="container" id="content">
   <%= if live_flash(@flash, :info) do %>
     <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
       <%= live_flash(@flash, :info) %>

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