Admin: display nav on mobile

app/soapbox/features/ui/index.js

@@ -32,6 +32,7 @@ import ProfilePage from 'soapbox/pages/profile_page';
 // import GroupSidebarPanel from '../groups/sidebar_panel';
 import SearchPage from 'soapbox/pages/search_page';
 import HomePage from 'soapbox/pages/home_page';
+import AdminPage from 'soapbox/pages/admin_page';
 import SidebarMenu from '../../components/sidebar_menu';
 import { connectUserStream } from '../../actions/streaming';
 import { Redirect } from 'react-router-dom';
@@ -157,14 +158,6 @@ const LAYOUT = {
       <FeaturesPanel key='0' />,
     ],
   },
-  ADMIN: {
-    LEFT: [
-      <AdminNav key='0' />,
-    ],
-    RIGHT: [
-      <LinkFooter key='1' />,
-    ],
-  },
   STATUS: {
     TOP: null,
     LEFT: null,
@@ -286,8 +279,8 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/soapbox/config' layout={LAYOUT.DEFAULT} component={SoapboxConfig} content={children} />
 
         <Redirect from='/admin/dashboard' to='/admin' exact />
-        <WrappedRoute path='/admin' layout={LAYOUT.ADMIN} component={Dashboard} content={children} exact />
-        <WrappedRoute path='/admin/approval' layout={LAYOUT.ADMIN} component={AwaitingApproval} content={children} exact />
+        <WrappedRoute path='/admin' page={AdminPage} component={Dashboard} content={children} exact />
+        <WrappedRoute path='/admin/approval' page={AdminPage} component={AwaitingApproval} content={children} exact />
         <WrappedRoute path='/info' layout={LAYOUT.EMPTY} component={ServerInfo} content={children} />
 
         <WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />

app/soapbox/pages/admin_page.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import LinkFooter from '../features/ui/components/link_footer';
+import AdminNav from 'soapbox/features/admin/components/admin_nav';
+
+export default
+class AdminPage extends ImmutablePureComponent {
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <div className='page page--admin'>
+        <div className='page__columns'>
+          <div className='columns-area__panels'>
+
+            <div className='columns-area__panels__pane columns-area__panels__pane--left'>
+              <div className='columns-area__panels__pane__inner'>
+                <AdminNav />
+              </div>
+            </div>
+
+            <div className='columns-area__panels__main'>
+              <div className='columns-area columns-area--mobile'>
+                {children}
+              </div>
+            </div>
+
+            <div className='columns-area__panels__pane columns-area__panels__pane--right'>
+              <div className='columns-area__panels__pane__inner'>
+                <LinkFooter />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/styles/components/admin.scss

@@ -94,3 +94,24 @@
 .slist .item-list article:nth-child(2n-1) .unapproved-account {
   background-color: hsla(var(--accent-color_hsl), 0.07);
 }
+
+.page--admin {
+  @media screen and (max-width: 895px) {
+    .columns-area__panels {
+      flex-direction: column;
+      align-items: center;
+
+      &__pane--left {
+        display: block;
+        width: 100%;
+        max-width: 600px;
+        padding: 20px 20px 0;
+        box-sizing: border-box;
+
+        .columns-area__panels__pane__inner {
+          width: auto;
+        }
+      }
+    }
+  }
+}