[Glitch] Change links in multi-column mode so tabs are open in single-column mode

Port 5fad7bd58a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx

@@ -5,6 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import NavigationPortal from 'flavours/glitch/components/navigation_portal';
 import { timelinePreview, trendsEnabled } from 'flavours/glitch/initial_state';
+import { transientSingleColumn } from 'flavours/glitch/is_mobile';
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 
 import ColumnLink from './column_link';
@@ -27,6 +28,7 @@ const messages = defineMessages({
   followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' },
   about: { id: 'navigation_bar.about', defaultMessage: 'About' },
   search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
+  advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
   app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
 });
 
@@ -52,6 +54,15 @@ class NavigationPanel extends Component {
 
     return (
       <div className='navigation-panel'>
+        {transientSingleColumn && (
+          <>
+            <a href={`/deck${location.pathname}`} className='button button--block'>
+              {intl.formatMessage(messages.advancedInterface)}
+            </a>
+            <hr />
+          </>
+        )}
+
         {signedIn && (
           <>
             <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />