From fe06da5e92f6de3062089cdca88ffd89da029a76 Mon Sep 17 00:00:00 2001
From: Robert Prehn <prehnra@gmail.com>
Date: Wed, 29 Jul 2020 13:59:20 +0000
Subject: [PATCH] fix: Make sidebar menu work

---
 .../templates/layout/_menu.html.eex           |  2 +-
 .../templates/layout/_side_menu.html.eex      | 22 +++++++++++++------
 .../content_web/templates/layout/app.html.eex |  8 +++----
 apps/core/assets/js/app.js                    | 10 +++++++++
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/apps/content/lib/content_web/templates/layout/_menu.html.eex b/apps/content/lib/content_web/templates/layout/_menu.html.eex
index a0fed6ba..cb549d04 100644
--- a/apps/content/lib/content_web/templates/layout/_menu.html.eex
+++ b/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>
diff --git a/apps/content/lib/content_web/templates/layout/_side_menu.html.eex b/apps/content/lib/content_web/templates/layout/_side_menu.html.eex
index 9fec5775..81d20a6f 100644
--- a/apps/content/lib/content_web/templates/layout/_side_menu.html.eex
+++ b/apps/content/lib/content_web/templates/layout/_side_menu.html.eex
@@ -1,8 +1,16 @@
-<div class="ui vertical inverted sidebar menu">
-  <a class="active item">Home</a>
-  <a class="item">Work</a>
-  <a class="item">Company</a>
-  <a class="item">Careers</a>
-  <a class="item">Login</a>
-  <a class="item">Signup</a>
+<div class="ui vertical inverted left sidebar menu">
+  <a class="item" href="/">Home</a>
+  <%= if Auth.Roles.has_role?(@conn, :admin) do %>
+    <a class="item" href="/admin">Admin</a>
+  <% end %>
+  <%= if Pow.Plug.current_user(@conn) do %>
+    <%= 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>
diff --git a/apps/content/lib/content_web/templates/layout/app.html.eex b/apps/content/lib/content_web/templates/layout/app.html.eex
index 7eaa0732..6f5e3edc 100644
--- a/apps/content/lib/content_web/templates/layout/app.html.eex
+++ b/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>
diff --git a/apps/core/assets/js/app.js b/apps/core/assets/js/app.js
index 500ce8d6..d9be5a7d 100644
--- a/apps/core/assets/js/app.js
+++ b/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)
+  })
 })