Layout: make all UI routes have a static left sidebar

app/soapbox/features/ui/util/react_router_helpers.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom';
 
+import SidebarNavigation from 'soapbox/components/sidebar-navigation';
+import { Layout } from 'soapbox/components/ui';
 import { useOwnAccount, useSettings } from 'soapbox/hooks';
 
 import BundleColumnError from '../components/bundle_column_error';
@@ -75,29 +77,19 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
     );
   };
 
-  const renderLoading = () => {
+  const renderWithLayout = (children: JSX.Element) => (
-    return (
+    <>
-      <ColumnsArea layout={layout}>
+      <Layout.Main>
-        <ColumnLoading />
+        {children}
-      </ColumnsArea>
+      </Layout.Main>
-    );
-  };
 
-  const renderForbidden = () => {
+      <Layout.Aside />
-    return (
+    </>
-      <ColumnsArea layout={layout}>
-        <ColumnForbidden />
-      </ColumnsArea>
   );
-  };
 
-  const renderError = (props: any) => {
+  const renderLoading   = () => renderWithLayout(<ColumnLoading />);
-    return (
+  const renderForbidden = () => renderWithLayout(<ColumnForbidden />);
-      <ColumnsArea layout={layout}>
+  const renderError     = (props: any) => renderWithLayout(<BundleColumnError {...props} />);
-        <BundleColumnError {...props} />
-      </ColumnsArea>
-    );
-  };
 
   const loginRedirect = () => {
     const actualUrl = encodeURIComponent(`${history.location.pathname}${history.location.search}`);
@@ -119,7 +111,19 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
     }
   }
 
-  return <Route {...rest} render={renderComponent} />;
+  const renderBody = (props: RouteComponentProps) => {
+    return (
+      <Layout>
+        <Layout.Sidebar>
+          <SidebarNavigation />
+        </Layout.Sidebar>
+
+        {renderComponent(props)}
+      </Layout>
+    );
+  };
+
+  return <Route {...rest} render={renderBody} />;
 };
 
 export {

app/soapbox/pages/admin_page.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import { Layout } from 'soapbox/components/ui';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -11,11 +10,7 @@ import LinkFooter from '../features/ui/components/link_footer';
 
 const AdminPage: React.FC = ({ children }) => {
   return (
-    <Layout>
+    <>
-      <Layout.Sidebar>
-        <SidebarNavigation />
-      </Layout.Sidebar>
-
       <Layout.Main>
         {children}
       </Layout.Main>
@@ -27,7 +22,7 @@ const AdminPage: React.FC = ({ children }) => {
 
         <LinkFooter />
       </Layout.Aside>
-    </Layout>
+    </>
   );
 };
 

app/soapbox/pages/default_page.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -17,11 +16,7 @@ const DefaultPage: React.FC = ({ children }) => {
   const features = useFeatures();
 
   return (
-    <Layout>
+    <>
-      <Layout.Sidebar>
-        <SidebarNavigation />
-      </Layout.Sidebar>
-
       <Layout.Main>
         {children}
       </Layout.Main>
@@ -44,7 +39,7 @@ const DefaultPage: React.FC = ({ children }) => {
         )}
         <LinkFooter key='link-footer' />
       </Layout.Aside>
-    </Layout>
+    </>
   );
 };
 

app/soapbox/pages/empty_page.tsx

@@ -4,15 +4,13 @@ import { Layout } from '../components/ui';
 
 const EmptyPage: React.FC = ({ children }) => {
   return (
-    <Layout>
+    <>
-      <Layout.Sidebar />
-
       <Layout.Main>
         {children}
       </Layout.Main>
 
       <Layout.Aside />
-    </Layout>
+    </>
   );
 };
 

app/soapbox/pages/home_page.tsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import {
   WhoToFollowPanel,
@@ -35,11 +34,7 @@ const HomePage: React.FC = ({ children }) => {
   const acct = account ? account.acct : '';
 
   return (
-    <Layout>
+    <>
-      <Layout.Sidebar>
-        <SidebarNavigation />
-      </Layout.Sidebar>
-
       <Layout.Main className='divide-y divide-gray-200 divide-solid sm:divide-none'>
         {me && (
           <Card variant='rounded' ref={composeBlock}>
@@ -99,7 +94,7 @@ const HomePage: React.FC = ({ children }) => {
         )}
         <LinkFooter key='link-footer' />
       </Layout.Aside>
-    </Layout>
+    </>
   );
 };
 

app/soapbox/pages/profile_page.js

@@ -6,7 +6,6 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { Redirect, withRouter } from 'react-router-dom';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -127,11 +126,7 @@ class ProfilePage extends ImmutablePureComponent {
     }
 
     return (
-      <Layout>
+      <>
-        <Layout.Sidebar>
-          <SidebarNavigation />
-        </Layout.Sidebar>
-
         <Layout.Main>
           <Column label={account ? `@${getAcct(account, displayFqn)}` : null} withHeader={false}>
             <div className='space-y-4'>
@@ -171,7 +166,7 @@ class ProfilePage extends ImmutablePureComponent {
           )}
           <LinkFooter key='link-footer' />
         </Layout.Aside>
-      </Layout>
+      </>
     );
   }
 

app/soapbox/pages/remote_instance_page.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -32,11 +31,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
     const { children, params: { instance: host }, disclosed, isAdmin } = this.props;
 
     return (
-      <Layout>
+      <>
-        <Layout.Sidebar>
-          <SidebarNavigation />
-        </Layout.Sidebar>
-
         <Layout.Main>
           {children}
         </Layout.Main>
@@ -55,7 +50,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
           )}
           <LinkFooter key='link-footer' />
         </Layout.Aside>
-      </Layout>
+      </>
     );
   }
 

app/soapbox/pages/status_page.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import {
   WhoToFollowPanel,
@@ -33,11 +32,7 @@ class StatusPage extends ImmutablePureComponent {
     const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
 
     return (
-      <Layout>
+      <>
-        <Layout.Sidebar>
-          <SidebarNavigation />
-        </Layout.Sidebar>
-
         <Layout.Main>
           {children}
         </Layout.Main>
@@ -60,7 +55,7 @@ class StatusPage extends ImmutablePureComponent {
           )}
           <LinkFooter key='link-footer' />
         </Layout.Aside>
-      </Layout>
+      </>
     );
   }