Add persistent state to nav bar expand/retract

app/javascript/mastodon/features/ui/components/navigation_panel.js

@@ -12,6 +12,7 @@ import ListPanel from './list_panel';
 import NotificationsCounterIcon from './notifications_counter_icon';
 import SignInBanner from './sign_in_banner';
 import NavigationPortal from 'mastodon/components/navigation_portal';
+import { navRetracted } from 'mastodon/settings';
 
 const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
@@ -58,13 +59,20 @@ class NavigationPanel extends React.Component {
   };
 
   state = {
-    retracted: false,
+    retracted: navRetracted.get('hometown'),
   };
 
+  componentDidMount() {
+    const mainContent = document.querySelector('.columns-area--mobile');
+    if (this.state.retracted) {
+      mainContent.classList.add('fullWidth');
+    }
+  }
+
   handleMenuToggle() {
     this.setState({
       retracted: !this.state.retracted,
-    });
+    }, () => navRetracted.set('hometown', this.state.retracted));
     const mainContent = document.querySelector('.columns-area--mobile');
     if (!this.state.retracted) {
       mainContent.classList.add('navigation-panel--retracted');

app/javascript/mastodon/settings.js

@@ -46,3 +46,4 @@ export default class Settings {
 export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
 export const tagHistory = new Settings('mastodon_tag_history');
 export const bannerSettings = new Settings('mastodon_banner_settings');
+export const navRetracted = new Settings('hometown_nav_retracted');

app/javascript/styles/mastodon/components.scss

@@ -8837,6 +8837,11 @@ div.status__content--with-spoiler {
     margin: 0;
   }
 
+  .columns-area--mobile.fullWidth {
+    width: 100%;
+    margin: 0;
+  }
+
   .columns-area--mobile.navigation-panel--retracted {
     width: 100%;
     margin: 0 auto auto 0;
@@ -8889,6 +8894,11 @@ div.status__content--with-spoiler {
     margin: 0;
   }
 
+  .columns-area--mobile.fullWidth {
+    width: 100%;
+    margin: 0;
+  }
+
   .columns-area--mobile.navigation-panel--extended {
     width: calc(100% - $sidebar-width);
     margin: 0;