Add some minimally-functional CSS/JS for the settings submenu

wagtail/wagtailadmin/menu.py

@@ -95,7 +95,7 @@ class SubmenuMenuItem(MenuItem):
 
     @property
     def media(self):
-        return self.menu.media
+        return Media(js=['wagtailadmin/js/submenu.js']) + self.menu.media
 
     def is_shown(self, request):
         # show the submenu if one or more of its children is shown
@@ -103,9 +103,9 @@ class SubmenuMenuItem(MenuItem):
 
     def render_html(self, request):
         return format_html(
-            """<li class="menu-{0}">
+            """<li class="menu-{0} submenu-trigger">
                 <a href="#" class="{1}"{2}>{3}</a>
-                <ul class="submenu">{4}</ul>
+                <ul class="nav-submenu">{4}</ul>
             </li>""",
             self.name, self.classnames, self.attr_string, self.label, self.menu.render_html(request)
         )

wagtail/wagtailadmin/static/wagtailadmin/js/submenu.js

@@ -0,0 +1,12 @@
+$(function(){
+    $('.nav-main li.submenu-trigger').each(function() {
+        var submenuUl = $(this).find('> ul.nav-submenu');
+        /* move submenuUl out of .nav-main */
+        $('.nav-wrapper').append(submenuUl);
+
+        $(this).find('> a').click(function() {
+            submenuUl.toggle();
+            return false;
+        });
+    });
+});

wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss

@@ -257,6 +257,16 @@ body{
         font-size:0.9em;
     }
 
+    .nav-submenu {
+        display: none; /* prevent submenu showing before JS load */
+        position: absolute;
+        left: 99%;
+        z-index: 500;
+        width: 200px;
+        background-color: $color-grey-1;
+    }
+
+
 .content-wrapper{
     width:100%;
     height:100%; /* this has no effect on desktop, but on mobile it helps aesthetics of menu popout action */
@@ -681,6 +691,11 @@ footer, .logo{
         }
     }
 
+    .submenu-items {
+        position: absolute;
+        left: 99%;
+    }
+
     footer{
         width:80%;
         margin-left:50px;
@@ -711,6 +726,9 @@ footer, .logo{
     .explorer {
         z-index:$explorer-z-index;
     }
+    .nav-submenu {
+        z-index:$explorer-z-index;
+    }
     .nav-wrapper{
         z-index:auto; /* allows overspill of messages banner onto left menu, but also explorer to spill over main content */
     }