Add mobile navigation bar

app/assets/stylesheets/application.scss

@@ -81,6 +81,7 @@
 "components/inbox-entry",
 "components/jumbotron",
 "components/locales",
+"components/mobile-nav",
 "components/notifications",
 "components/profile",
 "components/question",

app/assets/stylesheets/components/_buttons.scss

@@ -11,7 +11,7 @@
   text-transform: uppercase;
   text-decoration: none;
   position: fixed;
-  bottom: 0px;
+  bottom: calc(#{$navbar-height} + env(safe-area-inset-bottom));
   right: 0px;
   margin-right: 7px;
   margin-bottom: 7px;

app/assets/stylesheets/components/_mobile-nav.scss

@@ -0,0 +1,9 @@
+#rs-mobile-nav {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
+
+  .navbar-nav {
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+}

app/assets/stylesheets/elements/_body.scss

@@ -3,5 +3,10 @@ body {
   word-wrap: break-word;
   color: RGB(var(--body-text));
   background-color: var(--background);
-  padding-top: $navbar-height;
+  @include media-breakpoint-up('lg') {
+    padding-top: $navbar-height;
+  }
+  @include media-breakpoint-down('md') {
+    padding-bottom: $navbar-height;
+  }
 }

app/views/navigation/_desktop.haml

@@ -0,0 +1,21 @@
+%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top.d-lg-block.d-none{ role: :navigation }
+  .container{ class: ios_web_app? ? 'ios-web-app' : '' }
+    %a.navbar-brand{ href: '/' }
+      %i.fa.fa-comments
+      = APP_CONFIG['site_name']
+    %ul.nav.navbar-nav.mr-auto
+      = nav_entry t('views.navigation.timeline'), root_path, icon: 'home'
+      = nav_entry t('views.navigation.inbox'), '/inbox', icon: 'inbox', badge: inbox_count
+      - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
+        = nav_entry t('views.navigation.discover'), discover_path, icon: 'compass'
+    %ul.nav.navbar-nav
+      - if @user.present? && @user != current_user
+        %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.list') }
+          %a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
+            %i.fa.fa-list.hidden-xs
+            %span.d-none.d-sm-inline.d-md-none= t('views.actions.list')
+      = render 'navigation/main/notifications'
+      %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') }
+        %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
+          %i.fa.fa-pencil-square-o
+      = render 'navigation/main/profile'

app/views/navigation/_main.haml

@@ -1,26 +1,5 @@
-%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top{ role: :navigation }
+= render 'navigation/desktop'
-  .container{ class: ios_web_app? ? 'ios-web-app' : '' }
+= render 'navigation/mobile'
-    %a.navbar-brand{ href: '/' }= APP_CONFIG['site_name']
-    %button.navbar-toggler{ data: { target: '#j2-main-navbar-collapse', toggle: :collapse }, type: :button }
-      %span.sr-only Toggle navigation
-      %span.navbar-toggler-icon
-    .collapse.navbar-collapse#j2-main-navbar-collapse
-      %ul.nav.navbar-nav.mr-auto
-        = nav_entry t('views.navigation.timeline'), root_path
-        = nav_entry t('views.navigation.inbox'), '/inbox', badge: inbox_count
-        - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
-          = nav_entry t('views.navigation.discover'), discover_path
-      %ul.nav.navbar-nav
-        - if @user.present? && @user != current_user
-          %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.list') }
-            %a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
-              %i.fa.fa-list.hidden-xs
-              %span.d-none.d-sm-inline.d-md-none= t('views.actions.list')
-        = render 'navigation/main/notifications'
-        %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') }
-          %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
-            %i.fa.fa-pencil-square-o
-        = render 'navigation/main/profile'
 
 = render 'modal/ask'
 %button.btn.btn-primary.btn-fab.d-block.d-sm-none{ data: { target: '#modal-ask-followers', toggle: :modal }, type: 'button' }

app/views/navigation/_mobile.haml

@@ -0,0 +1,14 @@
+%nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block#rs-mobile-nav{ role: :navigation }
+  .container{ class: ios_web_app? ? 'ios-web-app' : '' }
+    %ul.nav.navbar-nav.mr-auto
+      .collapse.navbar-collapse#j2-mobile-navbar-collapse
+        %ul.nav.navbar-nav
+          = render 'navigation/mobile/profile'
+      = nav_entry t('views.navigation.timeline'), root_path, icon: 'home', icon_only: true
+      = nav_entry t('views.navigation.inbox'), '/inbox', badge: inbox_count, icon: 'inbox', icon_only: true
+      - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
+        = nav_entry t('views.navigation.discover'), discover_path, icon: 'compass', icon_only: true
+      = nav_entry t('views.navigation.notifications'), '#', icon: 'bell-o', icon_only: true
+      %li.nav-item.profile--image-dropdown
+        %a{ data: { target: '#j2-mobile-navbar-collapse', toggle: :collapse } }
+          %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }

app/views/navigation/mobile/_profile.haml

@@ -0,0 +1,31 @@
+.dropdown-menu
+  %h6.dropdown-header.d-none.d-sm-block= current_user.screen_name
+  %a.dropdown-item{ href: show_user_profile_path(current_user.screen_name) }
+    %i.fa.fa-fw.fa-user
+    = t('views.navigation.show')
+  %a.dropdown-item{ href: edit_user_registration_path }
+    %i.fa.fa-fw.fa-cog
+    = t('views.navigation.settings')
+  .dropdown-divider
+  - if current_user.has_role?(:administrator)
+    %a.dropdown-item{ href: rails_admin_path }
+      %i.fa.fa-fw.fa-cogs
+      = t('views.navigation.admin')
+    %a.dropdown-item{ href: sidekiq_web_path }
+      %i.fa.fa-fw.fa-bar-chart
+      = t('views.navigation.sidekiq')
+    %a.dropdown-item{ href: pghero_path }
+      %i.fa.fa-fw.fa-database
+      Database Monitor
+    %a.dropdown-item{ href: announcement_index_path }
+      %i.fa.fa-fw.fa-info
+      Announcements
+    .dropdown-divider
+  - if current_user.mod?
+    %a.dropdown-item{ href: moderation_path }
+      %i.fa.fa-fw.fa-gavel
+      = t('views.navigation.moderation')
+    .dropdown-divider
+  %a.dropdown-item{ href: destroy_user_session_path, data: { method: :delete } }
+    %i.fa.fa-fw.fa-sign-out
+    = t 'views.sessions.destroy'