diff --git a/app/assets/images/avatar_no_fill.svg b/app/assets/images/avatar_no_fill.svg new file mode 100644 index 00000000..23e6b940 --- /dev/null +++ b/app/assets/images/avatar_no_fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/bell.svg b/app/assets/images/bell.svg new file mode 100644 index 00000000..ee95f124 --- /dev/null +++ b/app/assets/images/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/calendar.svg b/app/assets/images/calendar.svg new file mode 100644 index 00000000..a9136743 --- /dev/null +++ b/app/assets/images/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/clock.svg b/app/assets/images/clock.svg new file mode 100644 index 00000000..2f04e9a4 --- /dev/null +++ b/app/assets/images/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/info.svg b/app/assets/images/info.svg new file mode 100644 index 00000000..41c2967e --- /dev/null +++ b/app/assets/images/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/helpers/navigation_helper.rb b/app/helpers/navigation_helper.rb index 3aaa18e5..9490d431 100644 --- 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 new file mode 100644 index 00000000..c8272f81 --- /dev/null +++ b/app/views/layouts/_bottom_navbar.html.erb @@ -0,0 +1,22 @@ +
+ + <%= inline_svg_tag "calendar.svg", class: nav_icon_class_for([root_path]) %> + Agenda + + + <%= inline_svg_tag "clock.svg", class: nav_icon_class_for([root_path]) %> + My Schedule + + + <%= inline_svg_tag "avatar_no_fill.svg", class: nav_icon_class_for([profile_path, edit_profile_path]) %> + Profile + + + <%= inline_svg_tag "bell.svg", class: nav_icon_class_for([root_path]) %> + Notifications + + + <%= inline_svg_tag "info.svg", class: nav_icon_class_for([root_path]) %> + About + +
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 535eeb7e..d338038e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,8 +11,8 @@ <%= javascript_importmap_tags %> - -
+ +
<% if !current_page?(new_session_path) %>
@@ -33,5 +33,6 @@ <%= button_to "Log out", session_path, method: :delete %> <% end %>
+ <%= render partial: "layouts/bottom_navbar" if user_signed_in? %> diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb index 2fe09605..feacac86 100644 --- a/app/views/profiles/show.html.erb +++ b/app/views/profiles/show.html.erb @@ -1,4 +1,4 @@ -
+
diff --git a/config/tailwind.config.js b/config/tailwind.config.js index 81aa2ff0..de149015 100644 --- 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',