Adding menu and fixed navbar

pydemic · Dec 7, 2020 · 47e6d67 · 47e6d67
1 parent 85cdd15
commit 47e6d67
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/lib/health_board_web/live/components/card/card_header_menu.ex b/lib/health_board_web/live/components/card/card_header_menu.ex
@@ -17,7 +17,7 @@ defmodule HealthBoardWeb.LiveComponents.CardHeaderMenu do
   @spec render(map()) :: LiveView.Rendered.t()
   def render(assigns) do
     ~H"""
-    <div class={{ "uk-card-header", "uk-visible-toggle", "show-when-not-hover-container", "uk-transition-toggle", "hb-border": @border_color, "hb-border-bottom": @border_color, "hb-border-#{@border_color}": @border_color }}>
+    <div id={{ @card_id }} class={{ "uk-card-header", "uk-visible-toggle", "show-when-not-hover-container", "uk-transition-toggle", "hb-border": @border_color, "hb-border-bottom": @border_color, "hb-border-#{@border_color}": @border_color }}>
       <h3 class={{"uk-card-title", "show-when-not-hover"}}>
         {{ @card.name }}
       </h3>

diff --git a/lib/health_board_web/live/live_views/dashboard_live/fragments/analytic_dashboard/summary.ex b/lib/health_board_web/live/live_views/dashboard_live/fragments/analytic_dashboard/summary.ex
@@ -13,7 +13,10 @@ defmodule HealthBoardWeb.DashboardLive.Fragments.AnalyticDashboard.Summary do
 
     ~H"""
     <Section>
-      <SubSectionHeader title={{ @section.name }} description={{ @section.description }} />
+      <SubSectionHeader
+        title={{ @section.name }}
+        description={{ @section.description }}
+      />
 
       <Grid>
         <IncidenceCard

diff --git a/lib/health_board_web/templates/layout/root.html.leex b/lib/health_board_web/templates/layout/root.html.leex
@@ -12,11 +12,48 @@
 </head>
 
 <body>
-  <nav class="uk-navbar-container uk-navbar-transparent uk-light hb-root-navbar" uk-navbar>
-    <div class="uk-navbar-center">
-      <a class="uk-navbar-item uk-logo" href="<%= Routes.dashboard_path(@conn, :index) %>">Painel Saúde</a>
+  <div data-uk-sticky>
+    <nav class="uk-navbar-container uk-navbar-transparent uk-light hb-root-navbar" uk-navbar>
+      <div class="uk-navbar-left">
+        <a class="uk-navbar-toggle uk-margin-left" toggle href="#menu-offcanvas" uk-toggle>
+          <span uk-navbar-toggle-icon></span>
+        </a>
+      </div>
+      <div class="uk-navbar-center">
+        <a class="uk-navbar-item uk-logo" href="<%= Routes.dashboard_path(@conn, :index) %>">Painel Saúde</a>
+      </div>
+    </nav>
+  </div>
+  <div id="menu-offcanvas" uk-offcanvas>
+    <div class="uk-offcanvas-bar">
+      <button class="uk-offcanvas-close" type="button" uk-close></button>
+      <%= if Map.has_key?(assigns, :dashboard) do %>
+      <div>
+        <h3><%= @dashboard.name %></h3>
+        <%= if is_list(@dashboard.sections) do%>
+          <ul class="uk-nav-default uk-nav-parent-icon" uk-nav="multiple: true">
+            <%= for %{section: section} <- @dashboard.sections do %>
+              <li class="uk-parent">
+                <a href="#"><%= section.name %></a>
+                <%= if is_list(section.cards) do %>
+                  <ul class="uk-nav-sub">
+                    <%= for %{name: name, id: card_id} <- section.cards do %>
+                      <li>
+                        <a href="#<%= card_id %>">
+                          <%= name %>
+                        </a>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+      </div>
+      <% end %>
     </div>
-  </nav>
+  </div>
 
   <%= @inner_content %>
 </body>