#proposal 86 introduction of feeds navigation (#3916)

* Updated Profile Navigation Menu

Added @username's Feed alongside "Wallet" and "Settings" on the right of the Navigation bar.

Also implemented "My Feed" for when a user is logged in which is currently commented out.

* Top Navigation Implementation

Archiving the version of the restyled navigation menu that positions it at the top of the screen.

* Revert "Top Navigation Implementation"

This reverts commit d246aa9.

* Revert "Updated Profile Navigation Menu"

This reverts commit b112f20.

* Introduction of Primary Navigation

These changes introduce a Primary Navigation across the site.

The navigation uses an "App Style", bottom tab structure on mobile devices and a more traditional left navigation for Desktop.

Full details of the changes are available in the following Steemit posts:

Updated Files: https://steemit.com/hive-151113/@the-gorilla/proposal-86-change-log-edited-files

New Navigation Component: https://steemit.com/hive-151113/@the-gorilla/proposal-86-change-log-primarynavigation-jsx-and-scss

* Bug Fix

Fixed a bug for logged out users on a mobile device.  They would see an empty secondary navigation under the "Explore" tab.

* Performance & Display Tweak

Performance: Moved the windowHeight and navHeight calculations into the "Desktop only" scroll section.

Display: Tweaked the calculations to improve how the navigation is pinned when taller than the screenHeight.

Swapped the "Posts" and "Blog" labels so that "Blog" appears before "Posts" in the Profile Menu.

* Spacing Adjustment

Adjusted the spacing between icons and their labels.

* Hidden "Load More..."

Where the "Load more..." link appears on the Notifications screen, it was hidden behind the 2nd level of navigation on Mobile Devices.  Additional padding has been introduced to correct this.

* Bug Fix

Fixed the following issue:

1. Go to your test site or steemitdev
2. Logout
3. Go to the top-level page (or just reload the page?)
4. Login
5. A list of communities gets displayed under, "My Subscriptions", but the communities are not the ones that I subscribe to.

The subscriptions were only loaded upon "componentWillMount" with a log in not constituting a remount.  Therfore, if the subscriptions have not been set, they should be set upon a componentDidUpdate instead / as well.

* Improved Previous Bug Fix

Used componentDidUpdate in previous bug fix where componentWillUpdate will give an improved user experience (i.e. with DidUpdate, the "Trending Subscriptions" flashed up before being updated whereas "WillUpdate" has the update prepared.

* Revert "Improved Previous Bug Fix"

This reverts commit 8259147.

* #3918 Bug Fix

This bug was preventing the navigation displaying correctly on mobile devices so needed fixing as part of #proposal-86.

The chosen solution was to change the method of showing/hiding items to use "display" instead of "visibility".  This meant that everything looks the same but the underlying method is different.

I also removed an unnecessary parameter when accessing the previousUrl from localStorage.

---------

Co-authored-by: the-gorilla-steem <[email protected]>

src/app/components/App.scss

@@ -6,6 +6,12 @@
 .App__content {
   margin-top: 1rem;
   overflow: hidden;
+  margin-bottom: 60px;
+  padding-bottom: 30px;
+
+  @include MQ(M) {
+      margin-bottom: 0;
+  }
 }
 
 .welcomeWrapper {

src/app/components/all.scss

@@ -10,6 +10,7 @@
 @import './cards/PostsList';
 @import './cards/NotificationsList';
 @import './cards/DraftSummary';
+@import './cards/PrimaryNavigation';
 // elements
 @import './elements/Ad';
 @import './elements/Icon';

src/app/components/cards/NotificationsList.jsx

@@ -398,7 +398,11 @@ class NotificationsList extends React.Component {
                     !isLastPage && (
                         <center>
                             <br />
-                            <a href="#" onClick={this.onClickLoadMore}>
+                            <a
+                                href="#"
+                                onClick={this.onClickLoadMore}
+                                className="LoadMore"
+                            >
                                 <strong>
                                     {tt('notificationslist_jsx.load_more')}
                                 </strong>

src/app/components/cards/NotificationsList.scss

@@ -78,3 +78,11 @@
     }
 }
 
+.LoadMore {
+    display: block;
+    padding-bottom: 60px;
+
+    @include MQ(M) {
+        padding-bottom: 0;
+    }
+}

src/app/components/cards/PostFull.scss

@@ -6,8 +6,6 @@
 
 .PostFull {
   padding: 2rem 1rem 1rem 1rem;
-  // margin: 0 auto;
-  max-width: 54rem;
   position: relative;
   @include themify($themes) {
     border-radius: themed('roundedCorners');