Skip to content

Commit 40dacf2

Browse files
rsmithlalrsmithlal
committed
WIP: Add bottom profile navigation bar
Improves the top nav by moving items to the bottom bar.
1 parent 6498f39 commit 40dacf2

File tree

9 files changed

+107
-118
lines changed

9 files changed

+107
-118
lines changed

‎app/assets/stylesheets/better_together/navigation.scss‎

Lines changed: 4 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,7 @@
11

2-
#main-nav {
2+
#main-nav, #platform-nav, #identity-nav {
33
z-index: 500;
44

5-
/* User navigation specific styles */
6-
#user-nav {
7-
8-
.dropdown-item {
9-
padding: 8px 12px;
10-
transition: background-color 0.2s;
11-
12-
&:hover {
13-
background-color: rgba(255, 255, 255, 0.1);
14-
}
15-
}
16-
17-
/* Specific styling for the profile button */
18-
.btn-outline-primary {
19-
color: #ffffff;
20-
border-color: #ffffff;
21-
margin-bottom: 0.5rem;
22-
23-
&:hover {
24-
background-color: rgba(255, 255, 255, 0.1);
25-
border-color: #ffffff;
26-
}
27-
}
28-
29-
/* Email and divider styling */
30-
p {
31-
color: #ffffff;
32-
font-size: 0.9rem;
33-
}
34-
35-
.dropdown-divider {
36-
border-color: rgba(255, 255, 255, 0.3);
37-
}
38-
39-
/* Logout button styling */
40-
.dropdown-item.text-danger {
41-
// color: #ff4d4d;
42-
43-
&:hover {
44-
background-color: rgba(255, 77, 77, 0.1);
45-
}
46-
}
47-
48-
.profile-image.user-nav {
49-
width: 24px;
50-
height: 24px;
51-
border: none;
52-
margin-right: 5px;
53-
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
54-
}
55-
}
56-
575
.nav-item {
586
.nav-link,
597
.dropdown-item,
@@ -86,9 +34,9 @@
8634
}
8735

8836
// Conversations icon
89-
&[data-identifier="conversations"]::before {
90-
content: "\f086"; // Comments icon
91-
}
37+
// &[data-identifier="conversations"]::before {
38+
// content: "\f086"; // Comments icon
39+
// }
9240

9341
// Log Out icon
9442
&[data-identifier="sign-out"]::before {

‎app/assets/stylesheets/better_together/profiles.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,15 @@
3333
}
3434

3535
&.user-nav {
36-
width: 4%;
37-
height: 4%;
36+
width: 24px;
37+
height: 24px;
38+
border: none;
39+
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
40+
}
41+
42+
&.identity-nav {
43+
width: 3rem;
44+
height: 3rem;
3845
border: none;
3946
margin-right: 1%;
4047
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);

‎app/assets/stylesheets/better_together/theme.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,42 @@ $dark-background-text-color: #f0f0f0 !default;
1111
$light-background-active-text-color: lighten($light-background-text-color, 20%) !default;
1212
$dark-background-active-text-color: darken($dark-background-text-color, 20%) !default;
1313

14+
1415
/* Define SCSS variables for common color properties */
1516
$slider-track-color: $secondary !default;
1617
$slider-track-height: 6px !default;
1718
$slider-thumb-border-color: $primary !default;
18-
$slider-thumb-color: $light !default;
19+
$slider-thumb-color: $dark-text-color !default;
1920
$slider-thumb-size: 15px !default;
2021
$slider-thumb-border-size: 2px !default;
2122

23+
@import "bootstrap/functions";
24+
@import "bootstrap/variables";
25+
2226
:root {
2327
--ss-main-height: 38px;
2428
}
2529

2630
.navbar-brand {
27-
--bs-navbar-brand-color: $light-background-text-color;
31+
// --bs-navbar-brand-color: $light-background-text-color;
2832

2933
&:hover, &:focus {
30-
--bs-navbar-brand-hover-color: lighten($light-background-text-color, 10%);
34+
--bs-navbar-brand-hover-color: #42b983;
3135
}
3236
}
3337

3438
.nav-link {
35-
--bs-nav-link-color: $light-background-text-color;
39+
// --bs-nav-link-color: $light-background-text-color;
3640

3741
&.show, &.active {
38-
--bs-navbar-active-color: lighten($light-background-text-color, 10%);
42+
--bs-navbar-active-color: #42b983;
3943
}
4044

4145
&:hover, &:focus {
42-
--bs-nav-link-hover-color: lighten($light-background-text-color, 10%);
46+
--bs-nav-link-hover-color: #42b983;
4347
}
4448
}
4549

46-
.dropdown-item {
47-
--bs-dropdown-link-color: $light-background-text-color;
48-
}
49-
5050
.host_community_logo {
5151
max-height: 5vh;
5252
}

‎app/helpers/better_together/notifications_helper.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ module BetterTogether
44
# groups view logic related to notifications
55
module NotificationsHelper
66
def unread_notification_count
7-
count = current_person.notifications.unread.size
7+
count = current_person&.notifications.unread.size
88
return if count.zero?
99

1010
content_tag(:span, count, class: 'badge bg-primary rounded-pill position-absolute notification-badge')
1111
end
1212

1313
def recent_notifications
14-
current_person.notifications.joins(:event).order(created_at: :desc).limit(5)
14+
current_person&.notifications.joins(:event).order(created_at: :desc).limit(5)
1515
end
1616
end
1717
end

‎app/views/layouts/better_together/_bottom_nav.html.erb‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
2+
<div id="bottom-nav" class="bg-light shadow-sm vw-100 fixed-bottom collapse show"> <!-- Hidden Notifications -->
3+
<nav class="collapse <%= 'show w-100 position-static' if current_page?(notifications_path) %>" id="navbarNotifications">
4+
<div class="container my-3">
5+
<%= render recent_notifications %>
6+
</div>
7+
</nav>
8+
9+
<!-- Identity nav -->
10+
<nav id="identity-nav" class="navbar navbar-expand-sm" aria-labelledby="userNavbarDropdownMenuLink">
11+
<div class="container">
12+
<% content_for :identity_brand do %>
13+
<%= link_to person_my_profile_path(person_id: current_person.slug), class: "navbar-brand my-profile d-flex align-items-center", data: { identifier: 'my-profile' } do %>
14+
<%= profile_image_tag(current_identity, class: 'identity-nav') %>
15+
<span class="identity-name ms-2"><%= current_identity.name %></span>
16+
<% end %>
17+
<% end %>
18+
19+
<% content_for :identity_nav_toggle do %>
20+
<!-- Toggler for mobile view -->
21+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#identity-navbar" aria-controls="identity-navbar" aria-expanded="false" aria-label="<%= t('navbar.toggle_navigation') %>">
22+
<span class="navbar-toggler-icon"></span>
23+
</button>
24+
<% end %>
25+
<div class="d-none">
26+
<%= yield :identity_brand %>
27+
<%= yield :identity_nav_toggle %>
28+
</div>
29+
<div id="identity-navbar" class="collapse navbar-collapse">
30+
<ul class="navbar-nav ms-auto text-center w-100 align-items-center justify-content-between" aria-labelledby="userNavbarDropdownMenuLink">
31+
<li class="nav-item">
32+
<%= link_to t('navbar.log_out'), destroy_user_session_path, data: { turbo_method: :delete, identifier: 'sign-out' }, class: "nav-link text-danger" %>
33+
</li>
34+
35+
<%= cache ['locale_switcher', request.fullpath, I18n.locale] do %>
36+
<%= render 'layouts/better_together/locale_switcher' %>
37+
<% end %>
38+
39+
<% if permitted_to?('manage_platform') %>
40+
<li id="host-nav-item">
41+
<%= render_platform_host_nav_items %>
42+
</li>
43+
<% end %>
44+
45+
<li class="nav-item">
46+
<%= link_to conversations_path, id: "conversations-icon", class: "nav-link position-relative#{' active' if url_for(controller: params[:controller], action: params[:action]) === conversations_path}", data: { 'identifier' => 'conversations', 'bs-toggle' => 'collapse', 'bs-target' => '#navbarConversations' }, aria: { expanded: false, controls: 'navbarConversations'} do %>
47+
<i class="fa fa-comments"></i> <%= t('navbar.conversations') %>
48+
<%= unread_notification_count %>
49+
<% end %>
50+
</li>
51+
52+
<li class="nav-item notifications dropdown" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t('navbar.notifications_tooltip') %>">
53+
<a id="notification-icon" class="nav-link position-relative<%= ' active' if url_for(controller: params[:controller], action: params[:action]) === notifications_path %>" href="<%= notifications_path %>" role="button" href="#notifications" data-bs-toggle="collapse" data-bs-target="#navbarNotifications" aria-expanded="false" aria-controls="navbarNotifications">
54+
<i class="fa fa-bell"></i> <%= t('navbar.notifications_tooltip') %>
55+
<%= unread_notification_count %>
56+
</a>
57+
</li>
58+
59+
<%= yield :editor_status if content_for? :editor_status %>
60+
</ul>
61+
</div>
62+
<div class="d-flex w-100 d-none-sm justify-content-between align-items-center">
63+
<%= yield :identity_brand %>
64+
</div>
65+
</div>
66+
</nav>
67+
</div>

‎app/views/layouts/better_together/_footer.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22
<!-- Footer -->
3-
<footer id="app-footer" class="footer py-4">
3+
<footer id="app-footer" class="footer py-4 bg-light <%= 'mb-5' if user_signed_in? %>mb-5">
44
<%= render partial: 'layouts/better_together/extra_footer_info_top' %>
55

6-
<nav id="footer-pages-nav" class="navbar navbar-expand-lg navbar-dark">
6+
<nav id="footer-pages-nav" class="navbar navbar-expand-lg">
77
<div class="container">
88
<!-- Toggler for mobile view -->
99
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#footerNavbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

‎app/views/layouts/better_together/_header.html.erb‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- Navbar -->
2-
<div id="main-nav" class="shadow-sm">
3-
<nav id="top-nav" class="navbar navbar-expand-lg navbar-dark">
2+
<div id="platform-nav" class="shadow-sm fixed-top bg-light">
3+
<nav id="top-nav" class="navbar navbar-expand-lg">
44
<div class="container">
55
<%= render 'layouts/better_together/navbar_brand' %>
66

@@ -17,7 +17,6 @@
1717
<div class="collapse navbar-collapse" id="navbarNavDropdown">
1818
<!-- Right-aligned nav items -->
1919
<ul class="navbar-nav ms-auto text-center">
20-
<%= yield :editor_status if content_for? :editor_status %>
2120

2221
<%= render_platform_header_nav_items %>
2322

@@ -32,26 +31,6 @@
3231

3332
<!-- User Auth Nav Item -->
3433
<% if user_signed_in? %>
35-
<li class="nav-item notifications dropdown" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t('navbar.notifications_tooltip') %>">
36-
<a id="notification-icon" class="nav-link position-relative<%= ' active' if url_for(controller: params[:controller], action: params[:action]) === notifications_path %>" href="<%= notifications_path %>" role="button" data-bs-toggle="dropdown" aria-expanded="false">
37-
<i class="fa fa-bell"></i>
38-
<%= unread_notification_count %>
39-
</a>
40-
<ul id="notification-list" class="dropdown-menu dropdown-menu-end p-3" style="min-width: 25rem;" aria-labelledby="notification-icon">
41-
<%= render recent_notifications %>
42-
</ul>
43-
</li>
44-
45-
<%= cache ['locale_switcher', request.fullpath, I18n.locale] do %>
46-
<%= render 'layouts/better_together/locale_switcher' %>
47-
<% end %>
48-
49-
<li id="host-nav-item">
50-
<% if permitted_to?('manage_platform') %>
51-
<%= render_platform_host_nav_items %>
52-
<% end %>
53-
</li>
54-
5534
<%# cache ['user_nav', current_identity.cache_key_with_version] do %>
5635
<%= render 'layouts/better_together/user_nav' %>
5736
<%# end %>
@@ -67,10 +46,12 @@
6746
</nav>
6847

6948
<!-- Hidden Search Form below navbar -->
70-
<div class="collapse <%= 'show w-100 position-static' if current_page?(search_path) %>" id="navbarSearch">
49+
<nav class="collapse <%= 'show w-100 position-static' if current_page?(search_path) %>" id="navbarSearch">
7150
<div class="container my-3">
7251
<%= render 'better_together/shared/search_bar' %>
7352
</div>
74-
</div>
75-
53+
</nav>
54+
<!-- User Auth Nav Item -->
55+
<% if user_signed_in? %>
56+
<% end %>
7657
</div>

‎app/views/layouts/better_together/_user_nav.html.erb‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,8 @@
11
<!-- If user is signed in, show avatar and name -->
2-
<li id="user-nav" class="nav-item dropdown" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t('navbar.user_nav_tooltip') %>">
3-
<a class="nav-link dropdown-toggle<%= ' active' if url_for(controller: params[:controller], action: params[:action]) === person_my_profile_path(person_id: current_person.slug) %>" href="<%= person_my_profile_path(person_id: current_person.slug) %>" id="userNavbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
2+
<li id="identity-nav-toggle" class="nav-item dropdown" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t('navbar.user_nav_tooltip') %>">
3+
<a class="nav-link<%= ' active' if url_for(controller: params[:controller], action: params[:action]) === person_my_profile_path(person_id: current_person.slug) %>" href="#profile" data-bs-toggle="collapse" data-bs-target="#bottom-nav" aria-expanded="false" aria-controls="bottom-nav">
4+
<span class="identity-name me-2"><%= current_identity.name %></span>
45
<%# Display avatar and name inline %>
56
<%= profile_image_tag(current_identity, class: 'user-nav') %>
6-
<span class="identity-name"><%= current_identity.name %></span>
77
</a>
8-
<ul class="dropdown-menu dropdown-menu-end p-3" aria-labelledby="userNavbarDropdownMenuLink">
9-
<li class="d-flex flex-column align-items-start mb-3 dropdown-item">
10-
<strong><%= current_user.email %></strong>
11-
</li>
12-
<li>
13-
<%= link_to t('navbar.my_profile'), person_my_profile_path(person_id: current_person.slug), class: "my-profile dropdown-item ", data: { identifier: 'my-profile' } %>
14-
</li>
15-
<li><%= link_to t('navbar.conversations'), conversations_path, class: "dropdown-item", data: { identifier: 'conversations' } %></li>
16-
17-
<li>
18-
<%= link_to host_community.name, host_community, class: "host-community dropdown-item ", data: { identifier: 'host-community' } %>
19-
</li>
20-
21-
<li><hr class="dropdown-divider"></li>
22-
<li><%= link_to t('navbar.log_out'), destroy_user_session_path, data: { turbo_method: :delete, identifier: 'sign-out' }, class: "dropdown-item text-danger" %></li>
23-
</ul>
248
</li>

‎app/views/layouts/better_together/application.html.erb‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
<%= javascript_importmap_tags %>
5353
</head>
5454
<body class="<%= content_for?(:body_class) ? yield(:body_class) : '' %>" data-controller="better_together--link-metrics" data-link-metrics-url="<%= metrics_link_clicks_path(locale: I18n.locale) %>">
55-
<div class="wrapper">
55+
<div class="wrapper mt-5">
5656
<!-- Custom Header from Host App -->
5757
<%= content_for?(:custom_header) ? yield(:custom_header) : render('layouts/better_together/header') %>
5858

@@ -68,6 +68,8 @@
6868
<!-- Custom Footer from Host App -->
6969
<%= content_for?(:custom_footer) ? yield(:custom_footer) : render('layouts/better_together/footer') %>
7070

71+
<%= render 'layouts/better_together/bottom_nav' if user_signed_in? %>
72+
7173
<!-- Custom Scripts from Host App -->
7274
<%= render 'layouts/better_together/custom_body_javascript' %>
7375
</div>

0 commit comments

Comments
 (0)