Merge branch 'left-sidebar' into 'develop'

Rearrange SidebarNavigation

See merge request soapbox-pub/soapbox-fe!1372

app/soapbox/components/sidebar-navigation-link.tsx

@@ -5,13 +5,19 @@ import { NavLink } from 'react-router-dom';
 import { Icon, Text, Counter } from './ui';
 
 interface ISidebarNavigationLink {
+  /** Notification count, if any. */
   count?: number,
+  /** URL to an SVG icon. */
   icon: string,
-  text: string | React.ReactElement,
+  /** Link label. */
+  text: React.ReactElement,
+  /** Route to an internal page. */
   to?: string,
+  /** Callback when the link is clicked. */
   onClick?: React.EventHandler<React.MouseEvent>,
 }
 
+/** Desktop sidebar navigation link. */
 const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
   const { icon, text, to = '', count, onClick } = props;
   const isActive = location.pathname === to;

app/soapbox/components/sidebar-navigation.tsx

@@ -149,12 +149,6 @@ const SidebarNavigation = () => {
 
         {account && (
           <>
-            <SidebarNavigationLink
-              to={`/@${account.acct}`}
-              icon={require('@tabler/icons/icons/user.svg')}
-              text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
-            />
-
             <SidebarNavigationLink
               to='/notifications'
               icon={require('@tabler/icons/icons/bell.svg')}
@@ -162,6 +156,14 @@ const SidebarNavigation = () => {
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
 
+            {renderMessagesLink()}
+
+            <SidebarNavigationLink
+              to={`/@${account.acct}`}
+              icon={require('@tabler/icons/icons/user.svg')}
+              text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
+            />
+
             <SidebarNavigationLink
               to='/settings'
               icon={require('@tabler/icons/icons/settings.svg')}
@@ -170,8 +172,6 @@ const SidebarNavigation = () => {
           </>
         )}
 
-        {account && renderMessagesLink()}
-
         {menu.length > 0 && (
           <DropdownMenu items={menu}>
             <SidebarNavigationLink