Merge pull request #52 from TelosLabs/feature/navigation

Add navigation
TelosLabs · Jul 30, 2024 · c8d0b10 · c8d0b10
2 parents 904c0aa + 257cde2
commit c8d0b10
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 3 deletions.
diff --git a/app/assets/images/avatar_no_fill.svg b/app/assets/images/avatar_no_fill.svg
diff --git a/app/assets/images/bell.svg b/app/assets/images/bell.svg
diff --git a/app/assets/images/calendar.svg b/app/assets/images/calendar.svg
diff --git a/app/assets/images/clock.svg b/app/assets/images/clock.svg
diff --git a/app/assets/images/info.svg b/app/assets/images/info.svg
diff --git a/app/helpers/navigation_helper.rb b/app/helpers/navigation_helper.rb
@@ -1,4 +1,14 @@
 module NavigationHelper
+  def nav_icon_class_for(path)
+    return "fill-red stroke-red w-6 h-6" if path.any? { |p| current_page?(p) }
+    "fill-gray-5 stroke-gray-5 w-6 h-6"
+  end
+
+  def nav_text_class_for(path)
+    return "text-red" if path.any? { |p| current_page?(p) }
+    "text-gray-5"
+  end
+
   # Todo: A better approach would be to support authenticated root and unauthenticated root in routes.rb
   def homepage_link
     user_signed_in? ? root_path : new_session_path

diff --git a/app/views/layouts/_bottom_navbar.html.erb b/app/views/layouts/_bottom_navbar.html.erb
@@ -0,0 +1,22 @@
+<div class="sticky bottom-0 flex flex-row items-center justify-center gap-8 bg-white py-1 border-t border-b border-gray-7 text-[11px]">
+  <a href="<%= root_path %>" class="<%= nav_text_class_for [root_path] %> flex flex-col items-center">
+    <%= inline_svg_tag "calendar.svg", class: nav_icon_class_for([root_path]) %>
+    Agenda
+  </a>
+  <a href="<%= root_path %>" class="<%= nav_text_class_for [root_path] %> flex flex-col items-center justify-center">
+    <%= inline_svg_tag "clock.svg", class: nav_icon_class_for([root_path]) %>
+    My Schedule
+  </a>
+  <a href="<%= profile_path %>" class="<%= nav_text_class_for [profile_path, edit_profile_path] %> flex flex-col items-center justify-center">
+    <%= inline_svg_tag "avatar_no_fill.svg", class: nav_icon_class_for([profile_path, edit_profile_path]) %>
+    Profile
+  </a>
+  <a href="<%= root_path %>" class="<%= nav_text_class_for [root_path] %> flex flex-col items-center justify-center">
+    <%= inline_svg_tag "bell.svg", class: nav_icon_class_for([root_path]) %>
+    Notifications
+  </a>
+  <a href="<%= root_path %>" class="<%= nav_text_class_for [root_path] %> flex flex-col items-center justify-center">
+    <%= inline_svg_tag "info.svg", class: nav_icon_class_for([root_path]) %>
+    About
+  </a>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -11,8 +11,8 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body class="h-full bg-gray-8">
-    <main class="relative flex flex-col w-full h-full mx-auto">
+  <body class="flex flex-col h-full bg-gray-8">
+    <main class="relative flex flex-col flex-1 w-full mx-auto overflow-auto">
       <% if !current_page?(new_session_path) %>
         <div class="flex justify-center w-full py-6 mx-auto border-b border-b-white bg-purple-dark">
           <div class="flex max-w-screen-sm px-5">
@@ -33,5 +33,6 @@
         <%= button_to "Log out", session_path, method: :delete %>
       <% end %>
     </main>
+    <%= render partial: "layouts/bottom_navbar" if user_signed_in? %>
   </body>
 </html>
diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
@@ -1,4 +1,4 @@
-<div class="flex flex-col items-center bg-gray-8 relative min-h-screen justify-between ">
+<div class="flex flex-col items-center bg-gray-8 relative flex-1 justify-between ">
   <div class="flex flex-col items-center bg-cover bg-bottom bg-no-repeat max-h-[430px] w-full pt-6 px-5 pb-12" style="background-image: url(<%= asset_path 'background_design.svg' %>)">
     <div class="flex flex-col items-start z-10 max-w-screen-sm">
       <div class="flex flex-row items-center">

diff --git a/config/tailwind.config.js b/config/tailwind.config.js
@@ -18,7 +18,9 @@ module.exports = {
       colors: {
         gray: '#C6C6C8',
         'gray-8': '#F3F2F8',
+        'gray-7': '#D7D7D8',
         'gray-6': '#C6C6C8',
+        'gray-5': '#A2A2A2',
         'purple-dark': '#432463',
         'purple-light': '#4E2A73',
         red: '#CB0C1C',