Merge branch 'menu-fixes' into 'master'

fix: Make sidebar menu work

See merge request mythic-insight/legendary!11

apps/content/lib/content_web/templates/layout/_menu.html.eex

@@ -1,6 +1,6 @@
 <div class="ui container">
   <div class="ui large secondary inverted pointing menu">
-    <a class="toc item">
+    <a class="toc item js-SidebarOpener">
       <i class="sidebar icon"></i>
     </a>
     <a class="item" href="/">Home</a>

apps/content/lib/content_web/templates/layout/_side_menu.html.eex

@@ -1,8 +1,16 @@
-<div class="ui vertical inverted sidebar menu">
+<div class="ui vertical inverted left sidebar menu">
-  <a class="active item">Home</a>
+  <a class="item" href="/">Home</a>
-  <a class="item">Work</a>
+  <%= if Auth.Roles.has_role?(@conn, :admin) do %>
-  <a class="item">Company</a>
+    <a class="item" href="/admin">Admin</a>
-  <a class="item">Careers</a>
+  <% end %>
-  <a class="item">Login</a>
+  <%= if Pow.Plug.current_user(@conn) do %>
-  <a class="item">Signup</a>
+    <%= link "Sign out", to: AuthWeb.Router.Helpers.pow_session_path(@conn, :delete), method: :delete, class: "item" %>
+  <% else %>
+    <%= link to: AuthWeb.Router.Helpers.pow_session_path(@conn, :new), class: "item" do %>
+      Log in
+    <% end %>
+    <%= link to: AuthWeb.Router.Helpers.pow_registration_path(@conn, :new), class: "item" do %>
+      Sign Up
+    <% end %>
+  <% end %>
 </div>

apps/content/lib/content_web/templates/layout/app.html.eex

@@ -17,11 +17,11 @@
         <div class="ui inverted vertical masthead center aligned segment">
           <%= render "_menu.html", assigns %>
         </div>
+
+        <%= flash_block(@conn) %>
+
+        <%= @inner_content %>
       </div>
-
-      <%= flash_block(@conn) %>
-
-      <%= @inner_content %>
     </main>
   </body>
 </html>

apps/core/assets/js/app.js

@@ -38,8 +38,18 @@ function togglePasswordFieldVisibility()
   })
 }
 
+const toggleSidebar = (event) => {
+  document.querySelectorAll('.sidebar').forEach((el) => {
+    el.classList.toggle('visible')
+  })
+}
+
 ready(() => {
   document.querySelectorAll('.js-passwordRevealer').forEach((el) => {
     el.addEventListener('click', togglePasswordFieldVisibility)
   })
+
+  document.querySelectorAll('.js-SidebarOpener').forEach((el) => {
+    el.addEventListener('click', toggleSidebar)
+  })
 })