Change navigation layout on small screens in web UI (#34910)

app/javascript/mastodon/reducers/index.ts

@@ -21,6 +21,7 @@ import { markersReducer } from './markers';
 import media_attachments from './media_attachments';
 import meta from './meta';
 import { modalReducer } from './modal';
+import { navigationReducer } from './navigation';
 import { notificationGroupsReducer } from './notification_groups';
 import { notificationPolicyReducer } from './notification_policy';
 import { notificationRequestsReducer } from './notification_requests';
@@ -76,6 +77,7 @@ const reducers = {
   history,
   notificationPolicy: notificationPolicyReducer,
   notificationRequests: notificationRequestsReducer,
+  navigation: navigationReducer,
 };
 
 // We want the root state to be an ImmutableRecord, which is an object with a defined list of keys,

app/javascript/mastodon/reducers/navigation.ts

@@ -0,0 +1,28 @@
+import { createReducer } from '@reduxjs/toolkit';
+
+import {
+  openNavigation,
+  closeNavigation,
+  toggleNavigation,
+} from 'mastodon/actions/navigation';
+
+interface State {
+  open: boolean;
+}
+
+const initialState: State = {
+  open: false,
+};
+
+export const navigationReducer = createReducer(initialState, (builder) => {
+  builder
+    .addCase(openNavigation, (state) => {
+      state.open = true;
+    })
+    .addCase(closeNavigation, (state) => {
+      state.open = false;
+    })
+    .addCase(toggleNavigation, (state) => {
+      state.open = !state.open;
+    });
+});