Repository: wagtail/wagtail

Issue:
Sidebar language picker does not display correctly when slim sidebar is enabled
### Issue Summary

Sidebar language picker does not display correctly when slim sidebar is enabled:

![Screenshot at 2021-12-21 11-14-26](https://user-images.githubusercontent.com/6025893/146961156-8a9eebad-b933-4246-bf11-ec686dd2521f.png)

### Steps to Reproduce

Start a clean wagtail app + do a minimal localization setup. I'm showing `simple_translation` here for minimal repro case. Also reproduces with wagtail-localize:

```py
INSTALLED_APPS = INSTALLED_APPS + [
    'wagtail.locales',
    'wagtail.contrib.simple_translation',
]

WAGTAIL_I18N_ENABLED = True

WAGTAIL_CONTENT_LANGUAGES = LANGUAGES = [
    ("en-us", "English"),
    ("fr", "French"),
]
```

Turn on slim sidebar

```py
WAGTAIL_EXPERIMENTAL_FEATURES = ["slim-sidebar"]
```

Create enough content through the frontend (1 level of hierarchy) and translate it so that the sidebar language picker is shown

with `WAGTAIL_EXPERIMENTAL_FEATURES = ["slim-sidebar"]` on:

![Screenshot at 2021-12-21 11-14-26](https://user-images.githubusercontent.com/6025893/146961290-a4e9b7a4-489b-408b-9a0b-268b8c745517.png)

with `WAGTAIL_EXPERIMENTAL_FEATURES = ["slim-sidebar"]` off:

![Screenshot at 2021-12-21 11-14-04](https://user-images.githubusercontent.com/6025893/146961304-0c6115b7-fa9e-44c1-a64a-557576225b80.png)

* I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: yes

### Technical details

* Python version: Python 3.8.10
* Django version: 3.1.13
* Wagtail version: 2.15.1
* Browser version: Screenshots are from Firefox but also reproduces in Chromium



Discussion:

Resolving patch:
diff --git a/wagtail/admin/localization.py b/wagtail/admin/localization.py
--- a/wagtail/admin/localization.py
+++ b/wagtail/admin/localization.py
@@ -97,6 +97,8 @@ def get_js_translation_strings():
         'SAVE_PAGE_TO_ADD_COMMENT': _('Save the page to add this comment'),
         'SAVE_PAGE_TO_SAVE_COMMENT_CHANGES': _('Save the page to save this comment'),
         'SAVE_PAGE_TO_SAVE_REPLY': _('Save the page to save this reply'),
+        'TOGGLE_SIDEBAR': _('Toggle sidebar'),
+        'MAIN_MENU': _('Main menu'),
         'DASHBOARD': _('Dashboard'),
         'EDIT_YOUR_ACCOUNT': _('Edit your account'),
         'SEARCH': _('Search'),
diff --git a/wagtail/admin/ui/sidebar.py b/wagtail/admin/ui/sidebar.py
--- a/wagtail/admin/ui/sidebar.py
+++ b/wagtail/admin/ui/sidebar.py
@@ -157,11 +157,16 @@ def __init__(self, menu_items: List[MenuItem], account_menu_items: List[MenuItem
     def js_args(self):
         from wagtail.admin.templatetags.wagtailadmin_tags import avatar_url
 
+        try:
+            first_name = self.user.first_name
+        except AttributeError:
+            first_name = None
+
         return [
             self.menu_items,
             self.account_menu_items,
             {
-                'name': self.user.first_name or self.user.get_username(),
+                'name': first_name or self.user.get_username(),
                 'avatarUrl': avatar_url(self.user, size=50),
             }
         ]


Test patch:
diff --git a/client/src/components/PageExplorer/PageExplorerPanel.test.js b/client/src/components/PageExplorer/PageExplorerPanel.test.js
--- a/client/src/components/PageExplorer/PageExplorerPanel.test.js
+++ b/client/src/components/PageExplorer/PageExplorerPanel.test.js
@@ -133,37 +133,4 @@ describe('PageExplorerPanel', () => {
       expect(wrapper.setProps({ depth: 0 }).state('transition')).toBe('pop');
     });
   });
-
-  describe('clickOutside', () => {
-    afterEach(() => {
-      mockProps.onClose.mockReset();
-    });
-
-    it('triggers onClose when click is outside', () => {
-      document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu></div><div id="t"></div>';
-      const wrapper = shallow(<PageExplorerPanel {...mockProps} />);
-      wrapper.instance().clickOutside({
-        target: document.querySelector('#t'),
-      });
-      expect(mockProps.onClose).toHaveBeenCalled();
-    });
-
-    it('does not trigger onClose when click is inside', () => {
-      document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu><div id="t"></div></div>';
-      const wrapper = shallow(<PageExplorerPanel {...mockProps} />);
-      wrapper.instance().clickOutside({
-        target: document.querySelector('#t'),
-      });
-      expect(mockProps.onClose).not.toHaveBeenCalled();
-    });
-
-    it('pauses focus trap inside toggle', () => {
-      document.body.innerHTML = '<div data-explorer-menu-item><div id="t"></div></div><div data-explorer-menu></div>';
-      const wrapper = shallow(<PageExplorerPanel {...mockProps} />);
-      wrapper.instance().clickOutside({
-        target: document.querySelector('#t'),
-      });
-      expect(wrapper.state('paused')).toEqual(true);
-    });
-  });
 });
diff --git a/client/tests/stubs.js b/client/tests/stubs.js
--- a/client/tests/stubs.js
+++ b/client/tests/stubs.js
@@ -65,6 +65,8 @@ global.wagtailConfig = {
     SAVE_PAGE_TO_ADD_COMMENT: 'Save the page to add this comment',
     SAVE_PAGE_TO_SAVE_COMMENT_CHANGES: 'Save the page to save this comment',
     SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save this reply',
+    TOGGLE_SIDEBAR: 'Toggle sidebar',
+    MAIN_MENU: 'Main menu',
   },
   WAGTAIL_I18N_ENABLED: true,
   LOCALES: [