[BUGFIX] Set module menu state on render time

The module menu now contains its state whether either the menu itself, or
its module groups are expanded or collapsed. This information is now taken
into account when the markup of the backend viewport is rendered.

With this patch, some AJAX requests done after the backend is initialized
can bre dropped, improving the backend UX since the state of the menus is
correctly handled on render time.

Resolves: #88935
Releases: master, 9.5
Change-Id: I3f3765926d9d3f406af0ee0bc29993d547771853
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/61477
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Richard Haeser <richard@maxserv.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Richard Haeser <richard@maxserv.com>
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/61513

typo3/sysext/backend/Classes/Controller/BackendController.php

@@ -251,6 +251,8 @@ protected function render()
         // Prepare the scaffolding, at this point extension may still add javascript and css
         $view = $this->getFluidTemplateObject($this->templatePath . 'Backend/Main.html');
 
+        $collapseState = $this->getBackendUser()->uc['BackendComponents']['States']['typo3-module-menu']['collapsed'] ?? false;
+        $view->assign('moduleMenuCollapsed', $collapseState === true || $collapseState === 'true');
         $view->assign('moduleMenu', $this->generateModuleMenu());
         $view->assign('topbar', $this->renderTopbar());
 

typo3/sysext/backend/Classes/Domain/Model/Module/BackendModule.php

@@ -69,6 +69,11 @@ class BackendModule
      */
     protected $children;
 
+    /**
+     * @var bool
+     */
+    protected $collapsed = false;
+
     /**
      * construct
      */
@@ -278,4 +283,14 @@ public function getOnClick()
     {
         return $this->onClick;
     }
+
+    public function setCollapsed(bool $collapsed): void
+    {
+        $this->collapsed = $collapsed;
+    }
+
+    public function getCollapsed(): bool
+    {
+        return $this->collapsed;
+    }
 }

typo3/sysext/backend/Classes/Domain/Repository/Module/BackendModuleRepository.php

@@ -182,6 +182,8 @@ protected function createEntryFromRawData(array $module)
         if (!empty($module['navigationFrameScriptParam']) && is_string($module['navigationFrameScriptParam'])) {
             $entry->setNavigationFrameScriptParameters($module['navigationFrameScriptParam']);
         }
+        $moduleMenuState = json_decode($this->getBackendUser()->uc['modulemenu'] ?? '{}', true);
+        $entry->setCollapsed(isset($moduleMenuState[$module['name']]));
         return $entry;
     }
 

typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html

@@ -1,4 +1,4 @@
-<div class="scaffold t3js-scaffold scaffold-modulemenu-expanded">
+<div class="scaffold t3js-scaffold {f:if(condition: '!{moduleMenuCollapsed}', then: 'scaffold-modulemenu-expanded')}">
 	<div class="t3js-scaffold-header">
 		<f:format.raw>{topbar}</f:format.raw>
 	</div>

typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html

@@ -1,6 +1,6 @@
 <ul class="nav nav-modules" data-role="modulemenu" id="menu">
 	<f:for each="{modules}" as="mainModule">
-		<li class="modulemenu-group expanded" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
+		<li class="modulemenu-group {f:if(condition: '{mainModule.collapsed}', then: 'collapsed', else: 'expanded')}" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
 			<div class="modulemenu-group-header">
 				<span class="modulemenu-icon modulemenu-group-icon">
 						<f:if condition="{mainModule.icon}">
@@ -16,12 +16,12 @@
 					{mainModule.title} <span class="caret"></span>
 				</span>
 			</div>
-			<ul class="modulemenu-group-container">
+			<ul class="modulemenu-group-container" {f:if(condition: '{mainModule.collapsed}', then: 'style="display: none;"')}>
 				<f:for each="{mainModule.children}" as="subModule">
 					<li id="{subModule.name}" class="modulemenu-item t3js-mainmodule" data-modulename="{mainModule.name}" data-navigationcomponentid="{subModule.navigationComponentId}" data-navigationframescript="{subModule.navigationFrameScript}" data-navigationframescriptparameters="{subModule.navigationFrameScriptParameters}">
 						<a href="#" data-link="{subModule.link}" class="modulemenu-item-link" title="{subModule.description}">
 							<span class="modulemenu-icon modulemenu-item-icon">
-                                <f:format.raw>{subModule.icon}</f:format.raw>
+								<f:format.raw>{subModule.icon}</f:format.raw>
 							</span>
 							<span class="modulemenu-item-title">
 								{subModule.title}

typo3/sysext/backend/Resources/Private/TypeScript/ModuleMenu.ts

@@ -220,29 +220,6 @@ class ModuleMenu {
     }
 
     deferred.then((): void => {
-      // check if module menu should be collapsed or not
-      const state = PersistentStorage.get('BackendComponents.States.typo3-module-menu');
-      if (state && state.collapsed) {
-        ModuleMenu.toggleMenu(state.collapsed === 'true');
-      }
-
-      // check if there are collapsed items in the users' configuration
-      const collapsedMainMenuItems = ModuleMenu.getCollapsedMainMenuItems();
-      $.each(collapsedMainMenuItems, (key: string, itm: boolean): void => {
-        if (itm !== true) {
-          return;
-        }
-
-        const $group = $('#' + key);
-        if ($group.length > 0) {
-          const $groupContainer = $group.find('.modulemenu-group-container');
-          $group.addClass('collapsed').removeClass('expanded');
-          Viewport.NavigationContainer.cleanup();
-          $groupContainer.hide().promise().done((): void => {
-            Viewport.doLayout();
-          });
-        }
-      });
       me.initializeEvents();
     });
   }