At the end of my previous update, perhaps lost amongst the documentation, I proposed that the first interface item that I work on is the introduction of a navigation menu at the top of the Feeds Screen as well as an adjustment to the existing "Profiles" menu.

My intention is to be consistent with the design used in the Profile area and introduce menu items:

All posts

Announcements

My Friends

My Communities

The motivation behind this is to remove the left or right sidebar from the Feeds Screen, allowing more room to be used for blog content without losing any of the existing information/functionality - so this is the first step to achieving that... perhaps I've explained this better elsewhere:

...to create a "menu bar" for the "Feeds" area like in the "Profile" (Blog, Posts, Comments, etc.) - this menu bar would include the navigation items that are currently in the left panel - with a view to removing it and only having one panel (perhaps the right one, displayed on the left).

I've mocked up the following image to visualise my proposal (click to open in higher-resolution):

This also brings some visual consistency across the user experience as I have included the users' Profile header throughout. Without this, the screen might look as follows:

An additional suggestion being that an additional link to My Profile or My Feed is provided alongside the Wallet and Settings (if logged in) Links in the "Profile Menu" as well as the following for a "Feeds Menu":

to allow users to remove the need for the left sidebar,

to allow users to more easily switch between Feeds and Profile and provide a clearer "Location" within steemit.com.

Profile Implementation

I've not just been playing with Photoshop and have also got my head into some code.

In the Profile area, I've added a link in the right to take the user to their friends feed.

{isMyAccount && (
< li>{_tablink('feed', tt('g.my_feed'))}</ li>
)}

I use the existing check isMyAccount to see if the user's viewing their own account (when logged in) (using the same logic as the Settings option).

This calls the _tablink function which is defined earlier in the file. This function takes 2 variables;

tab which is the URL that the element will link to
label the label which will appear on the screen.

The _tablink function also takes care of highlighting the active tab.

const _tablink = (tab, label) => {
  const cls = tab === top_active ? 'active' : null;
  return (
  < Link to={_url(tab)} className={cls}>
    {label}
  </ Link>
  );
};

Within the label variable, the tt() function acts as a translator, looking within the /src/app/locales directory for the g.my_feed declaration: "my_feed": "My feed",.

This implementation works on the basis of the user being logged in.

An alternative implementation that I've played with is for the Feed link to be available whether you're logged in or not - which will take the user to the "My Friends" Feed of whichever profile they're on. This is perhaps a little known URL that's available if you want to see another users' Friends feed.

For example, @the-gorilla/feed will display what I would see if I click on "My friends".

< li>
  <a href={"@"+accountname+"/feed"}>
    {accountname}'s {tt('g.feed')}
  </ a>
</ li>

I quite like this option and found myself skipping between different users' Friends feeds.

What do you think?

Which implementation within the Profile Menu do you prefer?

👨🏻‍💻 Condenser: Introduction of Navigation into Feeds Screen

Profile Implementation